美文网首页
元素大小

元素大小

作者: 立的flag一直在倒 | 来源:发表于2018-06-25 10:49 被阅读0次

摘自《JavaScript高级程序设计》

1、offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同
2、clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条
3、scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

一、偏移量
1、offsetHeight: 元素在垂直方向上占用的空间。包括:元素高度 +(可见的)水平滚动条高度 + 上下边框高度;
2、offsetWidth:元素在水平方向上占用的空间。元素宽度 + 垂直滚动条宽度 + 左右边框宽度;
3、offsetLeft:元素的左外边框,至,包含元素的左内边框之间的距离;
4、offsetTop:元素的上外边框,至,包含元素的上内边框之间的距离。

二、客户区大小
1、clientWidth:元素content宽度 + 左右padding;
2、clientHeight:元素content高度 + 上下padding高度;

三、滚动大小
1、scrollWidth:在没有滚动条的情况下,元素内容的总宽度;
2、scrollHeight:在没有滚动条的情况下,元素内容的总高度;
3、scrollLeft:被隐藏在内容区域左侧的像素数。通过设置改属性可以改变元素的滚动位置;
4、scrollTop:被隐藏在内容区域上方的像素数。通过设置改属性可以改变元素的滚动位置;

注意:
1、带有垂直滚动条的页面总高度为document.documentElement.scrollHeight;
2、对于不包含滚动条的页面,scrollHeight和scrollWidth 与 clientHeight和clientWidth的关系,在不同浏览器之间存在差异:
(1) Firefox中两组属性相等,但大小代表的是文档内容区域的实际尺寸,而非视口的尺寸;
(2) Opera、Safari 3.1及以上、Chrome中:
scrollWidth 和 scrollHeight = 视口大小,
clientWidth和clientHeight = 文档内容区域大小;
(3) IE(标准模式)中:
scrollWidth 和 scrollHeight = 文档内容区域大小,
clientWidth和clientHeight = 视口大小

四、确定元素大小
getBoundingClientRect():返回一个矩形对象,包括: left、top、right、bottom,给出页面中相对于视口的位置。IE8及更早版本认为文档的左上角坐标是(2, 2),其它浏览器则是(0, 0)。

// 跨浏览器可用的getBoundingClientRect()函数
      function getBoundingClientRect(element) {
            var scrollTop = document.documentElement.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft;
            if(element.getBoundingClientRect) {
                if(typeof arguments.callee.offset != "number") {
                    var temp = document.createElement("div");
                    temp.style.cssText = "position:absolute;left:0;top:0;";
                    document.body.appendChild(temp);
                    arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
                    document.body.removeChild(temp);
                    temp = null;
                }
                var rect = element.getBoundingClientRect();
                var offset = arguments.callee.offset;
                return {
                    left: rect.left + offset,
                    right: rect.right + offset, 
                    top: rect.top + offset,
                    bottom: rect.bottom + offset
                };
            } else {
                var actualLeft = getElementLeft(element);
                var actualTop = getElementTop(element);
                return {
                    left: actualLeft - scrollLeft,
                    right: actualLeft + element.offsetWidth - scrollLeft, 
                    top: actualTop - scrollTop, 
                    bottom: actualTop + element.offsetHeight - scrollTop
                }
            }
        }


相关文章

  • 元素大小

    摘自《JavaScript高级程序设计》 1、offsetWidth/offsetHeight返回值包含conte...

  • JavaScript元素大小

    1.偏移量 offsetHeight 元素在垂直方向上占用的空间大小,以像素记。包括元素的高度,(可见的)水...

  • 2020-06-22-Canvas笔记01-Canvas元素

    canvas元素的大小与绘图表面的大小 Canvas元素默认大小浏览器所创建的canvas元素,默认尺寸是 300...

  • 移动端开发自适应

    1、rem与em rem转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以...

  • 获取元素周边大小

    1.clientLeft 和clientTop 这组属性可以获取元素设置了左边框和上边框的大小。 box.clie...

  • 21.DOM 元素尺寸和位置

    学习要点: 1.获取元素 CSS 大小2.获取元素实际大小3.获取元素周边大小 本章,我们主要讨论一下页面中的某一...

  • useSize

    当前窗口,元素的大小变化 缺点 1 .并不能真实的反应div元素的大小,只是height的大小。padding,m...

  • css设置元素水平垂直都居中显示

    css设置元素水平垂直都居中显示 知道元素大小的情况 css3中不确定元素大小的情况 margin:auto实现绝...

  • 16.css: overflow使用 例: 固定div大小,不让

    子元素默认是存在于父元素的内容区中,理论上讲子元素的最大可以等于父元素内容区大小如果子元素的大小超过了父元素的内容...

  • TYPE指令

    获取类型大小, 对数组则是获取每个元素的大小

网友评论

      本文标题:元素大小

      本文链接:https://www.haomeiwen.com/subject/xforjftx.html