pageX:FF特有，鼠标在页面上的位置，从页面左上角开始定位，这个可以很方便在整个页面上进行定位，IE没有直接替换的属性。
HTML精确定位：scrollLeft,scrollWidth,clientWidth,offsetWidth
background: lightskyblue; } ---- clientWidth和clientHeigh clientTop...和clientLeft clientWidth = width+左右padding clientHeigh = height + 上下padding ---- clientTop = boder.top...("clientWidth: " + div.clientWidth); console.log("clientHeight: " + div.clientHeight); console.log("clientTop...: " + div.clientTop); console.log("clientLeft: " + div.clientLeft); ---- offsetWidth和offsetHight
clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding...2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop
console.log(oDiv.clientHeight); /* 1.offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body 2.clientLeft/clientTop...: 左边框 和 顶部边框 */ console.log(oDiv.clientLeft); console.log(oDiv.clientTop); </body
className classList clientLeft / clientTop clientWidth / clientHeight scrollLeft / scrollTop Element.getBoundingClientRect...3. clientLeft / clientTop clientLeft 表示元素左边框的宽度，clientTop 表示元素上边框的高度。两者都是只读属性，返回整数数值。
clientTop / clientLeft clientTop Element.clientTop 是一个只读属性，表示一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。...var clientTop = element.clientTop; ? clientLeft Element.clientLeft 是一个只读属性，表示一个元素的左边框的宽度，以像素表示。
document.documentElement.clientTop ? document.documentElement.clientTop : 0; const left = !...document.documentElement.clientTop ? document.documentElement.clientTop : 0; const left = !
*2 有padding有滚动：clientWidth=style.width+style.padding*2-滚动条宽度 document.body.clientLeft和document.body.clientTop...指元素周围边框的厚度，如果不指定边框或不定位元素，值为0 clientTop=border-top的border-width clientLeft=border-left的border-width 2
在IE中有一个小问题，在非IE浏览器下document.documentElement.clientTop/left值为0，而在在IE中document.documentElement.clientTop...html、body设置了margin和padding都为0），所以为了让getBoundingClientRect()方法兼容性更好，在IE中需要减去document.documentElement.clientTop...*/ function getBoundingClientRect(ele) { var top = document.documentElement.clientTop...document.documentElement.clientLeft, rect = ele.getBoundingClientRect(); // document.documentElement.clientTop
document.documentElement.clientTop ? document.documentElement.clientTop : 0; const left = !
client开头的clientWidth 元素可视区域的宽度：内容+左右padding-滚动条的宽度clientHeight 元素可视区域的高度：内容+上下padding-滚动条的高度clientTop...element.offsetHeight;// 获取元素的边框宽度const borderLeftWidth = element.clientLeft;const borderTopWidth = element.clientTop
document.documentElement.clientTop;//非IE为0，IE为2 document.documentElement.clientLeft;//非IE为0，IE为2 function... getRect(element) { var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop
document.body.scrollLeft - document.body.clientLeft y = e.clientY + document.body.scrollTop - document.body.clientTop...document.body.scrollLeft - document.body.clientLeft y = e.clientY + document.body.scrollTop - document.body.clientTop
元素字体大小变化 添加或者删除可见的DOM元素 激活CSS伪类（例如：:hover） 查询某些属性或调用某些方法 一些常用且会导致回流的属性和方法： clientWidth、clientHeight、clientTop...当你访问以下属性或方法时，浏览器会立刻清空队列： clientWidth、clientHeight、clientTop、clientLeft offsetWidth、offsetHeight、offsetTop
e.pageY) 46 e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;...if(this.maxY) 92 this.maxMouseY = this.maxY - (this.offsetHeight - (parseInt(this.clientTop
clientTop...|| document.body.clientWidth document.documentElement.clientHeight || document.body.clientHeight 2.clientTop
如果是盒子调用，指的是盒子本身 如果是body/html调用，指的是可视区域的大小 clientX:鼠标距离可视区域左侧距离(event调用) clientY:鼠标距离可视区域上侧距离(event调用) clientTop...clientY/clientX:（clientTop/clientLeft 值的是border） 调用者：event.clientX(event) 作用：鼠标距离浏览器可视区域的距离
console.log(son.offsetHeight); // 130 height + 2 * padding + borde 2. client系列 element.clientTop... const son = document.querySelector(".son"); console.log(son.clientTop
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent elem.clientLeft, elem.clientTop...当我们页面发生回流或重绘时，有时候并不是立即执行，而是先放入维护的队列中，到达一定时间后统一去进行绘制 当你访问以下属性或方法时，浏览器会立刻清空队列 clientWidth、clientHeight、clientTop
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
对象存储
云直播
