美文网首页Web 前端开发 让前端飞前端开发
关于DOM元素中一些偏移量和大小的总结

关于DOM元素中一些偏移量和大小的总结

作者: FeRookie | 来源:发表于2017-03-21 23:40 被阅读0次

    今天简要总结一下在DOM中关于样式的一些属性。

    元素大小

    • 偏移量
    • offsetHeight:表示元素在垂直方向上占用的空间大小,主要包括元素的高度,水平滚动条的高度和上下表框的高度。
    • offsetWidth:元素在水平方向上占用的空间大小,包括元素的宽度,垂直滚动条的宽度,左右边框的宽度。
    • offsetLeft:表示元素距离最近一个有定位父元素的左边距,距离计算由该元素的外边框至父元素的内边框之间的距离。
    • offsetTop:表示元素距离最近一个有定位父元素的上边距,距离计算由该元素的上外边框至父元素上内边框之间的距离。

    注:其中offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent中,offsetParent属性不一定和parentNode的值相等。

    当想知道某个元素在页面上的便宜量的时候,可以将这个元素的offsetLeft和其offsetParent的相同属性相加,如此循环至根元素即可。

    function getElementLeft(element){
            var left = element.offsetLeft
            var curEle = element.offsetParent
    
            while(curEle !== null ){
                left += curEle.offsetLeft
                curEle = curEle.offsetParent
            }
    
            return left
        }
    
    • 客户区大小

    元素的客户区大小指的是元素内容及其内边距所占的空间大小,有关这个的有以下两个属性:

    • clientWidth:表示元素内容宽度加上左右内边距宽度。
    • clientHeight:表示元素内容高度加上上下内边距高度。

    客户区大小就是元素内部的空间大小,因此滚动条占用的空间不计算在内。
    在确定浏览器视口大小可以使用:

    document.documentElement或document.body(IE7之前版本)中的clientWidth和clientHeight
    
    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属性,确定浏览器是否是在混杂模式下。
    
    • 滚动大小

    滚动大小指的是包含滚动内容元素的大小,有些元素没有执行任何代码也能自动添加滚动条。
    - scrollHeight:在没有滚动条的情况下,元素内容的总高度。
    - scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
    - scrollLeft:被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置。
    - scrollTop:被隐藏在内容区域上访的像素数,通过设置这个属性可以改变元素的滚动位置。

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

    document.documentElement.scrollHeight
    

    在IE中(标准模式)这两组属性不相等,其中scrollWidth和scrollHeight等于文档内容区域的大小,而clientWidth和clientHeight等于视口大小。
    所以在确定文档的高度的时候,必须取得scrollWidth/clientWidth和scrollHeight/clientHeight中的最大值,才可以保证跨浏览器的环境下得到精确的结果。

    var docH = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight)
    
    //注意在运行在混杂模式下的IE浏览器需要通过document.body来代替document.documentElement
    

    注意,其中scrollHeight和scrollWidth都是可以进行设置的。

    • 确定元素大小

    在浏览器中个每个元素都提供了一个getBoundingClientRect()方法,这个方法会返回一个矩形对象,包含left,top,right,bottom。这些属性给出了元素在页面中相对视口的位置,但是浏览器的实现稍微有些不同,IE8以及更早版本的IE认为左上角的坐标是(2,2),其他浏览器中会返回(0,0)

    相关文章

      网友评论

        本文标题:关于DOM元素中一些偏移量和大小的总结

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