元素大小

最新推荐文章于 2021-08-04 02:20:06 发布

遗忘的一隅

最新推荐文章于 2021-08-04 02:20:06 发布

阅读量271

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/acm_wln/article/details/79003069

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.偏移量（获取网页元素的绝对位置）

首先要介绍的属性涉及偏移量，包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。通过下列4个属性可以取得元素的偏移量。

offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）水平滚动条的宽度、左边框宽度和右边框宽度。

offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

其中，offsetLeft和offsetTop属性与包含元素有关，包含元素的引用保存在offsetParent属性中。offsetParent属性不一定与parentNode的值相等。例如，<td>元素的offsetParent是作为其祖先元素的<table>，因为<table>是在DOM层次中距<td>最近的一个具有大小的元素。

要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环直至根元素，就可以得到一个基本准确的值。以下两个函数就可以用于分别取得元素的左和上偏移量。（获取网页元素的绝对位置的横坐标和纵坐标）

function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;
    while(current !== null){
         actualLeft += current.offsetLeft;
         current = current.offsetParent;
    }
    return actualLeft;
}

function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while(current !== null){
         actualTop += current.offsetTop;
         current = current.offsetParent;
    }
    return actualTop;
}

这两个函数利用offsetParent属性在DOM层次中逐级向上回溯，将每个层次中的偏移量属性合计到一块。对于简单的css布局的页面，这两个函数可以得到非常精确的结果。对于使用表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，因此得到的值就不太精确了。一般来说，页面中的所有元素都会被包含在几个<div>中，而这些<div>元素的offsetParent又是<body>元素，所以getElementLeft()与getElementTop()会返回与offsetLeft和offsetTop相同的值。

Tips：所有这些偏移量属性都是只读的，而且每次访问它们都需要重新计算。因此，应该尽量避免重复访问这些属性；如果需要重复使用其中某些属性的值，可以将它们保存在局部变量中，以提高性能。

2.客户区大小

元素的客户区大小指的是元素内容及其内边距所占据的空间大小。有关客户区大小的属性有俩个:clientWidth和clientHeight.
其中，clientWidth属性是元素内容区宽度加上左右内边距宽度；clientHeight属性是元素内容区高度加上上下内边距高度。

客户区大小就是元素内部的空间大小，因此滚动条占用的空间不计算在内。要确定浏览器视口大小，可以使用document.documentElement或document.body（在IE7之前的版本中）的clientWidth和clientHeight.

/**
 * 
 * 获取浏览器视口(<html>或<body>元素)的大小
 * @returns 
 */
 function getViewport() {
     if(document.compatMode == "BackCompat"){    //检查浏览器是否运行在混杂模式
        return {
            width: document.body.clientWidth,
            height: document.body.clientHeight
        };
     }else {
         return {                                //标准模式
             width: document.documentElement.clientWidth,
             height: document.documentElement.clientHeight
         };
     }
 }

这个函数首先检查document.compatMode属性，以确定浏览器是否运行在混杂模式。Safari3.1之前的版本不支持这个属性，因此就会执行else语句。Chrome、Opera和Firefox大多数情况下都运行在标准模式下，因此他它们也会前进到else语句。这个函数会返回一个对象，包含两个属性：width和height；表示浏览器视口(<html>或<body>元素)的大小

tips：与偏移量类似，客户区大小也是只读的，也是每次访问都要重新计算的。

3.滚动大小

最后介绍的是滚动大小，指的是包含滚动内容的元素的大小。有些元素（例如<html>元素），即使没有执行任何代码也能自动的添加滚动条；但另外一些元素，则需要通过css的overf1ow属性进行设置才能滚动。以下是4个与滚动大小相关的属性。

scrollHeight：在没有滚动条的情况下，元素内容的总高度。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollWidth和scrollHeight主要用于确定元素内容的实际大小。例如，通常认为<html>元素是在Web浏览器的视口中滚动的元素（IE6之前版本运行在混杂模式下时是<body>元素）。因此，带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight.

对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不十分清晰。在这种情况下，基于document.documentElement查看这些属性会在不同浏览器间发现一些不一致的问题，如下所述。

a.Firefox中这两组属性始终都是相等的，但大小代表的文档内容区域的实际尺寸，而非视口的尺寸。

b.Opera、Safari3.1及更高版本、Chrome中的这两组属性是有差别的，其中scrollWidth和scrollHeight等于视口大小，而clientWidth和clientHeight等于文档内容区域的大小。

c.IE（在标准模式）中的这两组属性不相等，其中scrollWidth和scrollHeight等于文档内容区域的大小，而clientWidth和clientHeight等于视口大小。

在确定文档的总高度的时候（包括基于视口的最小高度时），必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值，才能保证在跨浏览器的环境下取得到精确的结果。下面就是这样一个例子。

 var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
 var docWidth = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

tips：对于运行在混杂模式下的IE，则需要用document.body代替document.documentElement.

通过scrollLeft和scrollTop属性既可以确定元素当前滚动的状态，也可以设置元素的滚动位置。在元素尚未被滚动时，这两个属性的值都是0。如果元素被垂直滚动了，那么scrollTop的值会大于0，且表示元素上方不可见内容的像素高度。如果元素被水平滚动了，那么scrollLeft的值会大于0，且表示元素左侧不可见内容的像素宽度。这两个属性都是可以设置的，因此将元素的scrollLeft和scrollTop设置为0，就可以重置元素的滚动位置。下面这个函数会检测元素是否位于顶部，如果不是就将其回滚到顶部。

function scrollToTop(element){
    if(element.scrollTop != 0){
        element.scrollTop = 0
    }
}

这个函数既取得了scrollTop的值，也设置了它的值。

4.确定元素大小（获取网页元素的相对位置）

IE、Firefox3+、Safari4+、Opera9.5及Chrome为每个元素都提供了一个getBoundingClientRect()方法。这个方法会返回一个矩形对象，包括4个属性：left、top、right和bottom。这些属性给出了元素在页面中相对于视口的位置。但是，浏览器的实现稍有不同。IE8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括IE9则将传统的(0,0)作为起点坐标。因此就需要在一开始检查一下位于(0,0)处的元素的位置，在IE8及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。来看下面的函数：

function getBoundingClientRect(element){
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    if(element.getBoundingClientRect){
        if(typeof arguments.callee.offset != "number"){    //arguments.callee代表正被执行的Function对象
            var scrollTop = document.documentElement.scrollTop;
            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 - screenTop,
            bottom: actualTop + element.offsetHeight - scrollTop
        }
    }
    
}

最后附上阮一峰老师的相关内容链接：点击打开链接

遗忘的一隅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素大小

1.偏移量（获取网页元素的绝对位置）首先要介绍的属性涉及偏移量，包括元素在屏幕上占用的所有可见的空间。元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框大小(注意，不包括外边距)。通过下列4个属性可以取得元素的偏移量。offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。offsetWidth
复制链接

扫一扫

专栏目录