展开

关键词

元素中必知重要属性和方法

className classList clientLeft / clientTop clientWidth / clientHeight scrollLeft / scrollTop Element.getBoundingClientRect 3. clientLeft / clientTop clientLeft 表示元素左边框的宽度,clientTop 表示元素上边框的高度。两者都是只读属性,返回整数数值。 // 用法 let demo = document.getElementById('demo'); demo.clientLeft; demo.clientHeight: 4. clientWidth

6320

client offset详解

console.log(oDiv.clientHeight); /* 1.offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body 2.clientLeft /clientTop: 左边框 和 顶部边框 */ console.log(oDiv.clientLeft); console.log(oDiv.clientTop); </script

15310
  • 广告
    关闭

    【玩转 Cloud Studio】有奖调研征文,千元豪礼等你拿!

    想听听你玩转的独门秘籍,更有机械键盘、鹅厂公仔、CODING 定制公仔等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    一文搞懂 JavaScript 中 DOM 相关的距离

    console.log(textarea.clientWidth, textarea.scrollWidth, textarea.offsetWidth);     console.log(textarea.clientLeft padding) textarea.offsetWidth = 200(可见区域) + 5(padding) + 5(padding) + 6(border) + 6(border) textarea.clientLeft 滚动条宽度) textarea.offsetWidth = 200(可见区域) + 5(padding) + 5(padding) + 6(border) + 6(border) textarea.clientLeft 滚动条宽度) textarea.offsetWidth = 200(可见区域) + 5(padding) + 5(padding) + 6(border) + 6(border) textarea.clientLeft clientWidth = width(可见区域)+ padding - 滚动条宽度(如果有) clientHeight = height(可见区域)+ padding - 滚动条宽度(如果有) clientLeft

    14131

    详解各种获取元素宽高及位置的属性

    clientTop / clientLeft clientTop Element.clientTop 是一个只读属性,表示一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。 clientLeft Element.clientLeft 是一个只读属性,表示一个元素的左边框的宽度,以像素表示。 clientLeft 不包括左外边距和左内边距。 var clientLeft = element.clientLeft; ? innerWidth / innerHeight ?

    63180

    Vue.js的图片加载性能优化你可以试试

    document.documentElement.clientLeft ? document.documentElement.clientLeft : 0; return { top: rect.top - top, bottom document.documentElement.clientLeft ? document.documentElement.clientLeft : 0; return { top: rect.top - top, bottom

    23410

    js实现简易拖拽

    y = e.pageY } else { x = e.clientX + document.body.scrollLeft - document.body.clientLeft 所以在 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 获取鼠标的位置 if (e.pageX) x = e.pageX y = e.pageY } else { x = e.clientX + document.body.scrollLeft - document.body.clientLeft

    79410

    Vue回炉重造之图片加载性能优化

    document.documentElement.clientLeft ? document.documentElement.clientLeft : 0; return { top: rect.top - top, bottom: rect.bottom

    13230

    第76天:jQuery中的宽高

    style.width+style.padding*2 有padding有滚动:clientWidth=style.width+style.padding*2-滚动条宽度 document.body.clientLeft 和document.body.clientTop 指元素周围边框的厚度,如果不指定边框或不定位元素,值为0 clientTop=border-top的border-width clientLeft=border-left

    23610

    JavaScript 动态加载脚本和样式

    document.documentElement.clientTop;//非IE为0,IE为2 document.documentElement.clientLeft;//非IE为0,IE为2 function element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left = document.documentElement.clientLeft

    516100

    如何在DataGrid里面产生滚动条而不滚动题头

    document.body.currentStyle.overflowY == 'scroll'){         w = document.body.offsetWidth - document.body.clientLeft         win.document.writeln('scrollbar');         w = win.document.body.offsetWidth - win.document.body.clientLeft tbl);     container[c].appendChild(tbl);     container[c].style.width = tbl.clientWidth + 2 * tbl.clientLeft         ftr.style.border = tbl.style.border;         ftr.style.width = getActualWidth(tbl) + 2 * tbl.clientLeft

    568110

    浏览器的回流与重绘 (Reflow & Repaint)

    添加或者删除可见的DOM元素 激活CSS伪类(例如::hover) 查询某些属性或调用某些方法 一些常用且会导致回流的属性和方法: clientWidth、clientHeight、clientTop、clientLeft 当你访问以下属性或方法时,浏览器会立刻清空队列: clientWidth、clientHeight、clientTop、clientLeft offsetWidth、offsetHeight、offsetTop

    26720

    使用 JavaScript 实现简单的拖拽

    所以在 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft;获取鼠标的位置。 = e.pageX; y = e.pageY; } else { x = e.clientX + document.body.scrollLeft - document.body.clientLeft

    42240

    js中offset系列、client系列、scroll系列和screen系列详解

    height + 2 * padding + borde </script> </body> 2. client系列 element.clientTop: 返回元素上边框的长度; element.clientLeft = document.querySelector(".son"); console.log(son.clientTop); // 5 console.log(son.clientLeft

    10720

    Canvas学习系列二:Canvas的坐标系统

    y: (y - canvasBox.top)*(canvas.height/canvasBox.height) } } 转换方法2:利用 scrollLeft, clientLeft windowToCanvas2(canvas, x, y){ return { x: x + document.body.scrollLeft - document.body.clientLeft windowToCanvas2(canvas, x, y){ return { x: x + document.body.scrollLeft - document.body.clientLeft

    3.1K10

    第52天:offset家族、scroll家族和client家族的区别

    指的是盒子本身 如果是body/html调用,指的是可视区域的大小 clientX:鼠标距离可视区域左侧距离(event调用) clientY:鼠标距离可视区域上侧距离(event调用) clientTop/clientLeft clientY/clientX:(clientTop/clientLeft 值的是border) 调用者:event.clientX(event) 作用:鼠标距离浏览器可视区域的距离

    40220

    简单拖拽实现

    e.pageX) 44 e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft if(this.maxX) 90 this.maxMouseX = this.maxX - (this.offsetWidth - (parseInt(this.clientLeft

    61740

    一文彻底搞懂js中的位置计算

    在不出现滚动条时候Element.clientWidth/Height === Element.scrollWidth/Height Element.clientTop/clientLeft Element.clientLeft clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。 同样的Element.clientTop表示元素上边框的宽度,也是一个只读属性。

    10910

    什么是回流与重绘 (Reflow & Repaint)

    盒子操作相关 elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent elem.clientLeft 当我们页面发生回流或重绘时,有时候并不是立即执行,而是先放入维护的队列中,到达一定时间后统一去进行绘制 当你访问以下属性或方法时,浏览器会立刻清空队列 clientWidth、clientHeight、clientTop、clientLeft

    20010

    扫码关注腾讯云开发者

    领取腾讯云代金券