scrollLeft scrollTop offse

scrollLeft scrollTop offsetLeft offsetTop 的区别

lt;!DOCTYPE HTML>

<head>

function req(){

var div=document.getElementById("div1");

document.getElementById("li1").innerHTML=(div.offsetTop)+"px";//div1距离屏幕顶部的距离

document.getElementById("li2").innerHTML=(div.offsetLeft)+"px";//div1距离屏幕左部的距离

document.getElementById("li3").innerHTML=(div.scrollTop)+"px";//div1纵向滚动条滚动的距离

document.getElementById("li4").innerHTML=(div.scrollLeft)+"px";//div1横向滚动条滚动的距离

}

</script>

</head>

<div style="height:500px;width:400px">请调整横竖滚动条后，点击按钮后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>

</div>

</div>

<ul style="list-style-type: none; line-height:30px;">结果：

<li>offsetTop : <span id="li1"></span></li>

<li>offsetLeft : <span id="li2"></span></li>

<li> scrollTop : <span id="li3"></span></li>

<li>scrollLeft : <span id="li4"></span></li>

</ul>

</div>

</body>

</html>

、偏移量offset

offset是偏移、位移、补偿的意思（取整数值四舍五入），表示元素的偏移量。

offsetHeight和offsetWidth

元素盒子模型的宽高（width/height + padding+border）

offsetLeft和offsetTop

1、表示当前元素距离它最近的相对父级（定位元素）的水平或者垂直距离。
2、如果它一直没有相对父级元素，默认指向body

offsetParent和parentNode

offsetParent 指的是最近的一个相对父级元素（默认指向body）
parentNode 就是直接父级（标签结构中的父子关系）

html和css代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        * {
             margin: 0;
             padding: 0;
             border: 0;
             list-style: none;
        }
 
         div {
             width: 300px;
             height: 300px;
             border: 1px solid #000;
             margin: 100px;
             position: relative;
        }
 
         span {
             width: 100px;
             height: 100px;
             border: 1px solid #000;
             position: absolute;
             left: 120px;
             top: 30px;
        }
     </style>
 </head>
 
 <body>
     <div>
         <span></span>
     </div>
 </body>
 
 </html>

JavaScript代码

ebApi 思维导图见文章底部

一、什么是webAPI?

web: 网页
API: 接口一套别人封装的属性和方法
webAPI: 专门操作网页的方法和属性
万物皆对象，在webAPI中把网页中所有元素 <element> 都当成对象来处理

二、文档树

2.1 三个部分

文档: document
元素: 网页中的标签
节点: 网页中所有的内容都叫节点(包括标签、属性、文本、注释)

2.2 节点的三个属性

1. nodeType(节点类型)
2. nodeName(节点名字)
3. nodeValue(节点值)

2.2.1 元素节点

元素节点就是标签节点

nodeType: 1
nodeName: 标签名(大写)
nodeValue: null

2.2.2 属性节点

属性包括属性名和属性值

nodeType: 2
nodeName: 属性名
nodeValue: 属性值

2.2.3 文本节点

nodeType: 3
nodeName: #text
nodeValue: 文本内容

2.2.4 注释节点

nodeType: 8
nodeName: #comment
nodeValue: 注释内容

三、window对象

window对象代表浏览器
window对象是JavaScript中的顶级对象
任何全局变量和全局函数声明后在预解析的过程中都会自动保存为window对象里面的属性和方法
window的两个特殊属性名不能再次声明!!
name: name属性名不管赋值任何值都会转换为字符串 let name={}; -> [object Object]
top
window的两个方法

window.open(href); /*打开一个网页*/
window.close(); /*关闭网页*/

四、事件

4.1 什么是事件?

在计算机中事件代表捕捉了用户进行了什么操作再给对应的事件处理

4.2 事件三大部分

事件源事件类型事件处理函数

4.2.1 事件源

用户操作的是什么元素事件中的this就是事件的事件源(谁触发这个事件那this就是谁)

4.2.2 事件类型

用户进行了什么操作

4.2.2.1 on

onmouseover 鼠标移入
onmouseout 鼠标移出
window.onload 当页面加载完成后执行
入口函数如果想将js代码写在html之前就可以用这个事件将js代码写在事件处理函数中
window.onunload 当页面退出前执行
可以保存用户信息=> 用户未保存信息直接退出网页
onfocus 获得焦点
文本框光标闪烁
onblur 失去焦点
onkeyup 键盘弹起
onkeydown 键盘按下
onscroll 滚动
当滚动页面滚动条时触发
onclick 点击
onclick 和 onmousedown 区别
onclick 按下弹起才触发
onmousedown 按下就会触发

实现拖拽要考虑元素是否有margin 移动的x和y?减去元素原有的margin 给元素添加鼠标按下事件在按下事件里面给页面添加鼠标移动事件给元素注册鼠标弹起事件=> 清除页面鼠标移动事件

onmousedown 鼠标按下
onmouseup 鼠标弹起
onmousemove 鼠标移动

H5拖拽需要为拖拽的元素添加 draggable="true" 属性 拖拽元素添加

ondragstart 拖拽开始
ondrag 拖拽中
ondragend 拖拽结束
拖拽的目标元素添加
ondropenter 有元素拖进来触发
ondropleave 有元素拖拽离开触发
ondropover 主要是为了配合ondrop使用，一定要在ondropover事件里调用e.preventDefault()才能让ondrop触发
ondrop 有元素拖到我范围内并松手才触发

4.2.2.2 addEventListener()

三参数

/*
事件名 不加on
事件处理函数
boolean值 是否事件捕捉
*/
el.addEventListener()

ie8 不支持 addEventListener 两参数

/*
事件名 加on
事件处理函数
*/
el.attachEvent()

4.2.2.3 on事件和addEventListener 添加事件的区别

元素.on事件=处理函数 (添加事件如果是同名事件，后面的事件处理函数会覆盖前面的) 元素.addEventListener() (添加事件不会覆盖之前的同名事件)

4.2.2.4 移除事件

用什么方式添加的事件就用什么方式移除事件

on=> null

el.onclick=function(){};
// 移除
el.onclick=null;

addEventListener=> removeEventListener
注意:如果addEventListener添加的事件的事件处理函数是匿名函数不能直接移除事件只能移除命名事件 (ie8的 attachEvent 一样)

el.addEventListener("click",fn1)
// 移除
el.removeEventListener("click",fn1)

attachEvent=> detachEvent

el.attachEvent("onclick",f1)
// 移除
el.detachEvent("onclick",fn1)

4.2.3 事件处理函数

用户操作后要执行的什么代码

4.2.3.1 事件对象 e

本质也是个对象
保存了事件触发时的相关信息
在事件处理函数中的形参里写参数 e
ie有兼容问题
兼容代码e=e || window.event
三大坐标

screen e.screenX 和 e.screenY 获取的是点击的位置相对于屏幕左上角的坐标

page e.pageX,e.pageY 获得的是点击的位置相对于页面（文档）左上角的坐标有兼容性的问题,IE8不支持，自己计算 pageX=e.clientX + 页面往左滚出去的距离 (scrollLeft) pageY=e.clientY + 页面往上滚出去的距离 (scrollTop)

offset e.offsetX,e.offsetY 获得是是点击的位置相当于事件源的左上角的位置 ie属性有bug offsetX=e.clientX - 盒子到可视区域的left (el.getBoundingClientRect.left) offsetY=e.clientY - 盒子到可视区域的top (el.getBoundingClientRect.top)

4.2.3.2 this、e.target、e.currentTarget区别

this 和 e.currentTarget 是一樣的当前调用的是谁的事件那么this就是谁 e.currentTarget ie8 不支持=> 直接用this

e.target 获取事件源(目标阶段) 正在触发事件的那个元素 ie8不支持=> e.target 兼容代码 var target=e.target || e.srcElement

4.3 事件的三大阶段

4.3.1 如何获取事件正在执行的阶段

在事件里可以通过 e.eventPhase 来捕获当前是哪个阶段捕获=> 1 目标=> 2 冒泡=> 3

4.3.2 三大阶段

捕获目标冒泡

4.3.2.1 捕获阶段

一种现象与冒泡阶段相反从window开始依次一级一级往下调用子元素的同名事件，直到找到真正触发事件的事件源事件捕获默认看不见想要看到捕获阶段则需要通过 addEventListener来绑定事件，并且第三个参数传true

4.3.2.2 目标阶段

找到真正触发事件的那个元素 -> 事件源

4.3.2.3 冒泡阶段

一种现象当元素事件触发后会从事件源开始依次一次一次往上调用父元素的同名事件，直到window 事件冒泡默认存在

好处：给父元素添加事件相当于给子元素添加了事件 -> 事件委托 -> e.target 带来的影响(坏处)：如果子元素和父元素有同名事件并且业务逻辑相反则会冲突影响

4.3.3 阶段顺序

设置捕获

先捕获从window开始依次一级一级调用子元素的同名事件 -> 找到目标(真正触发事件的元素) -> 从目标元素开始依次一级一级调用父元素的同名事件直到window

未设置捕获

找到目标(真正触发事件的元素) -> 从目标元素开始依次一级一级调用父元素的同名事件直到window

4.3.4 阻止事件派发

阻止事件冒泡和阻止事件捕获 e.stopPropagation() ie8魔鬼不支持(ie8只有事件冒泡，没有事件捕获)=> e.cancelBubble=true

五、本地存储

只能存储字符串查看本地存储浏览器F12->Application->Local || Session Storage->fille://

5.1 localStorage 本地存储

可以把数据存储到本地(浏览器) 只要用户不删除则会一直保存每个域名都是独立的保存数据不同域名不能互相访问长久保存数据可以存储到 localStorage

保存数据 localStorage.setItem(key,value)
获取数据 localStorage.getItem(key)=> 如果没有这个数据则返回 null
删除一个数据 localStorage.removeItem(key)
清空所有数据 localStorage.clear()

5.2 sessionStorage 会话存储

短暂存储数据可以多页面传值相当于localStorage会更安全浏览器关闭后就不会保存了

保存数据 sessionStorage.setItem(key,value)
获取数据 sessionStorage.getItem(key)=> 如果没有这个数据则返回 null
删除一个数据 sessionStorage.removeItem(key)
清空所有数据 sessionStorage.clear()

六、定时器和延时器

给元素添加动画定时器可以将定时器id直接给元素元素.timeId

6.1 定时器

每隔一段时间执行一段代码

/*
参数一: 要执行的代码 可以写字符串 在字符串里面写js代码 或者写函数
参数二: 间隔事件 单位是毫秒 1000毫秒=1秒
*/
window.setInterval()

6.2 延时器

一段时间后执行一段代码

/*
参数一: 要执行的代码 可以写字符串 在字符串里面写js代码 或者写函数
参数二: 延迟事件 单位是毫秒 1000毫秒=1秒
*/
window.setTimeout()

6.3 清除定时器和延时器

clearInterval(定时器id)
clearTimeout(延时器id)

七、阻止a标签默认跳转三种方式

7.1 href

将a标签的href的路径改为 javascript：void(0) || javascript：void(null) || 简写 javascript：

7.2 return

给a标签添加点击事件在事件处理函数的最后 return false

7.3 事件对象 e

阻止事件默认行为 e.preventDefault()

return和事件对象e阻止跳转的区别 return后面的代码不执行 e.preventDefault()不会影响后面代码执行

八、排他思想

先把大家恢复成默认，再让自己特殊 tab切换

九、offset家族

只能获取行内样式

只能取值 (number) 不能赋值 offsetWidth 和 offsetHeight 获取包括padding和border和width||height

9.1 offsetWidth

获取盒子的最终宽度

9.2 offsetHeight

获取盒子的最终高度

9.3 offsetTop

获取自身上外边框到定位父级上内边框的距离

9.4 offsetLeft

获取自身左外边框到定位父级左内边框的距离

十、scroll家族

scrollWidth 和 scrollHeight 获取的包括了隐藏的部分只能获取(number)不能修改 scrollLeft 和 scrollTop 可以获取也可以修改想要滚动条滚动到最右变直接赋值为 scrollWidth即可

10.1 scrollWidth

获取盒子内容的总宽度

10.2 scrollHeight

获取盒子内容的总高度

10.3 scrollTop

获取内容上边滚出去的距离

10.4 scrollLeft

获取内容左边滚出去的距离

scrollTop和scrollLeft有兼容问题兼容代码

var scrollTop=window.pageYOffset 
|| document.documentElement.scrollTop 
|| document.body.scrollTop 
|| 0;

var scrollLeft=window.pageXOffset 
|| document.documentElement.scrollLeft 
|| document.body.scrollLeft 
|| 0;

十一、client家族

如果元素有滚动条那么这个元素的可视宽度就是整个盒子的宽度 - 滚动条的宽度

11.1 clientWidth

获取可视区域的宽

11.2 clientHeight

获取可视区域的高

11.3 clientTop

获取左边框的宽度

11.4 clientLeft

获取上边看的宽度

十二、操作元素的方式

12.1 通过id获取元素

如果没有这个元素则返回null 有则返回一个对象

获取 id 只能通过document来获取

document.getElementById("id")

12.2 样式名获取元素

如果没有这个元素则返回一个空集合[伪数组] document.getElementsByClassName('class')

12.2.1 什么是伪数组?

有下标索引、有元素、有长度但是没有数组中的方法

12.3 通过标签名来获取元素

ie8魔鬼有兼容问题 document.getElementsByTagName("div")

12.4 通过name属性来获取元素(表单元素)

document.getElementsByName("name")

12.5 通过css选择器来获取元素 (h5新增)

获取的是一个对象如果匹配到多个元素则返回第一个元素
document.querySelector(selectors)
获取的是一个伪数组
document.querySelectorAll(selectors)

12.6 获取文档

document

12.7 获取html

document.documentElement

12.8 获取head

document.head

12.9 获取body

document.body

12.10 获取子节点和子元素

子节点
el.childNodes
子元素
el.childNodes

12.11 获取父节点和父元素

区别

el.parentNode可以获取到document el.parentElement不能获取到document 因为document不是一个元素

父节点
el.parentNode
父元素
el.parentNode

12.12 获取上一个兄弟节点和上一个兄弟元素

找到上一个兄弟节点(文本、注释、标签)，所有浏览器都支持
el.previousSibling
找到上一个兄弟元素(只会找到元素)，IE9以下都不支持
el.previousElementSibling

12.13 获取下一个兄弟节点和下一个兄弟元素

找到下一个兄弟节点(文本、注释、标签)，所有浏览器都支持
el.nextSibling
找到下一个兄弟元素(只会找到元素)，IE9以下都不支持
el.nextElementSibling

12.14 添加子元素

父元素.appendChild("子元素")

12.15 删除子元素

父元素.removeChild("子元素")

12.16 在某个子元素前面插入元素

父元素.insertBefore(插入的新元素,要在哪个元素前面插入)

12.17 替换子元素

父元素.replaceChild(新的元素,被替换的元素)

十三、操作属性的另二种方式

13.1 js 操作属性

既可以操作自带属性，也可以操作自定义属性

获取属性
el.getAttribute("属性名")
修改属性
el.setAttribute("属性名","属性值")
删除属性
el.removeAttribute("属性名")

13.2 h5 操作属性

在自定义属性前面加 data- 如果自定义属性前面添加了 data- 那么这些自定义属性都会保存到el.dataset '对象' 里面想要取得属性直接遍历对象即可取值时 data-会被去掉并且如果后面还有- 会把后面的-也去掉并把-后面的首字母大写(驼峰命名法)

获得属性
el.dataset["shengao"]
e.dataset.shengao
修改属性
el.dataset["shengao"]="123cm"
删除属性
delete el.dataset["shengao"]

十四、创建元素的三种方式

document.write()

只能在body添加元素，并且会覆盖之前页面中的元素

document.createElement()

创建一个标签存在内存里面再通过父元素.appendChild(“创建出来的元素”) 渲染到页面 appendChild细节给父元素追加一个元素，添加在最后，如果此元素已经存在，则被移动到最后

el.innerHtml()

为某元素添加内容，会覆盖原来的内容 +=就只会追加不会覆盖每次innerHtml赋值(+=)都是重新渲染，所以有可能会让之前的元素丢失，还会让之前元素的事件丢失(事件委托可解决) 渲染耗性能，大量资源浪费先拼接字符串再循环完了后一次性追加到页面中

十五、修改元素的属性

15.1 操作元素样式中的属性

获取
元素.style.样式名
修改
元素.style.样式名=样式值
注意

样式名如果在css 有 "-" 的应使用驼峰命名法 background-color=> backgroundColor

15.2 操作图片的路径

获取
元素.scr
修改
元素.scr="路径"

15.3 操作单标签按钮的文字

获取
元素.value
修改
元素.value="值"

15.4 操作元素的类名

15.4.1 JavaScript

获取
元素.className
添加
元素.className +=" class"
注意用+=得加空格

15.4.2 HTML5

el.classList 返回的是一个伪数组保存的是元素上的所有类名

添加一个类
el.classList.add("class")
删除一个类
el.classList.remove("class")
修改一个类
el.classList.replace("被替换的类","要替换的新类")
切换一个类
el.classList.toggle("class")
没有就添加这个类有就删除这个类
判断一个类是否存在
el.classList.contains("class")
存在返回true 不存在返回false

15.5 操作元素显示or隐藏

显示
元素.style.displaye="block"
隐藏
元素.style.displaye="none"
如果想要通过一个按钮切换显示隐藏可以声明一个flag 记录显示和隐藏的状态

let flag=this.value=="隐藏" ? true : false divBox.style.display=flag ? "none" : "block" this.value=flag ? "显示" : "隐藏" // 这里用来下一次点击再次toggle 所以需要与设置的flag相反设定对应的值

15.6 表单元素的禁用和启动

el.style.disabled=true

加上代表禁用不加上代表启动 js里面设置它为 true 代表禁用、false 代表启用

15.7 操作双标签的文字

获取
元素.innerText
修改
元素.innerText="值"

十六、innerHTML、innerText、textContent的区别

innerHTML没有兼容问题既可以拿到文本也可以渲染标签

innerText和textContent都是设置标签里面的文本内容将数据当成字符串输出到页面不会渲染 innerText在老版火狐里面不支持 textContent在ie9以下都不支持

十七、表单元素属性

value
可以获取大部分表单元素的内容(option除外)
type
可以获取表单元素的类型
disabled
禁用属性
checked
复选框选中
selected
下拉框选中

十八、获取元素的最终样式

window.getComputedStyle(element)["width"]
window.getComputedStyle(element).width

返回的string属性值 "100px"

/*ie8魔鬼专用*/
element.currentStyle['width']

十九、获取元素到可视区域的距离

element.getBoundingClientRect()
element.getBoundingClientRect().left
element.getBoundingClientRect().top

获取鼠标位置相对于自身的x和y (offsetX和offsetY有bug) e.clientX - 盒子到可视区域的left e.clientY - 盒子到可视区域的top

XMind思维导图

总结

若有感兴趣的小伙伴，需要WebAPI思维导图原图的，关注我，私信回复获取：WebAPI思维导图原图

作者：蓝海00
转载链接：https://www.jianshu.com/p/d3b815c8d914

在线咨询

上一篇：只需几步完成水印的批量添加操作
下一篇：HTML有2种路径的写法：绝对路径和相对路径

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

scrollLeft scrollTop offse

一、什么是webAPI?

二、文档树

2.1 三个部分

2.2 节点的三个属性

2.2.1 元素节点

2.2.2 属性节点

2.2.3 文本节点

2.2.4 注释节点

三、window对象

四、事件

4.1 什么是事件?

4.2 事件三大部分

4.2.1 事件源

4.2.2 事件类型

4.2.2.1 on

4.2.2.2 addEventListener()

4.2.2.3 on事件和addEventListener 添加事件的区别

4.2.2.4 移除事件

4.2.3 事件处理函数

4.2.3.1 事件对象 e

4.2.3.2 this、e.target、e.currentTarget区别

4.3 事件的三大阶段

4.3.1 如何获取事件正在执行的阶段

4.3.2 三大阶段

4.3.2.1 捕获阶段

4.3.2.2 目标阶段

4.3.2.3 冒泡阶段

4.3.3 阶段顺序

4.3.4 阻止事件派发

五、本地存储

5.1 localStorage 本地存储

5.2 sessionStorage 会话存储

六、定时器和延时器

6.1 定时器

6.2 延时器

6.3 清除定时器和延时器

七、阻止a标签默认跳转三种方式

7.1 href

7.2 return

7.3 事件对象 e

八、排他思想

九、offset家族

9.1 offsetWidth

9.2 offsetHeight

9.3 offsetTop

9.4 offsetLeft

十、scroll家族

10.1 scrollWidth

10.2 scrollHeight

10.3 scrollTop

10.4 scrollLeft

十一、client家族

11.1 clientWidth

11.2 clientHeight

11.3 clientTop

11.4 clientLeft

十二、操作元素的方式

12.1 通过id获取元素

12.2 样式名获取元素

12.2.1 什么是伪数组?

12.3 通过标签名来获取元素

12.4 通过name属性来获取元素(表单元素)

12.5 通过css选择器来获取元素 (h5新增)

12.6 获取文档

12.7 获取html

12.8 获取head

12.9 获取body

12.10 获取子节点和子元素

12.11 获取父节点和父元素

12.12 获取上一个兄弟节点和上一个兄弟元素

12.13 获取下一个兄弟节点和下一个兄弟元素

12.14 添加子元素

12.15 删除子元素

12.16 在某个子元素前面插入元素

12.17 替换子元素

十三、操作属性的另二种方式

13.1 js 操作属性

13.2 h5 操作属性