JavaScript学习总结--元素尺寸，位置

在JavaScript的学习过程中遇到了一些获得元素或事件或窗口位置的属性，如offsetLeft,offsetWidth,offsetX,clientWidth。对于初学者的我来讲主要坑有两点：

混淆这些属性的作用，如offsetWidth与clientWidth差别就差一个border.
哪些是元素的属性，哪些是事件的？

本文主要介绍总结了我学习中遇到的元素尺寸，位置相关属性，下一篇介绍event事件的鼠标尺寸。

元素的尺寸，位置相关：

element.offsetLeft
element.offsetTop
element.clientWidth		
element.clientHeight
element.offsetWidth		
element.offsetHeight

offsetLeft和offsetTop通俗的说：元素的边框外到自己offsetParent的边框内的距离的距离。那offsetParent是谁呢？这里高级浏览器和IE6,7不同。

高级浏览器如Chrome,IE9,IE9+等指离自己最近的定位的祖先元素，如果祖先元素都没有定位，则offsetParent为body。如图，绿色盒子定位了，则最里侧的黄色盒子的offsetLeft和offsetTop为图中红色箭头标注的距离。

在IE8中，offsetParent与高级浏览器相同，但是offsetLeft与offsetTop的计算方式略有不同，IE8中会把offsetParent的边框算进去。如图，如果最内部的黄色盒子的offsetParent是绿色盒子，则它的offsetLeft和offsetTop为图中红色箭头标注的距离。

IE6,7中，offsetParent与高级浏览器不同，这里分两种情况：

定位了的元素的offsetParent与高级浏览器一样。
没有定位的元素的offsetParent为离自己最近的有Width或Height的元素。

clientWidth和clientHeight, offsetWidth和offsetHeight 基本没有兼容问题。

clientWidth和clientHeight：就是指盒子的Width+padding-left+padding-right和Height+padding-top+padding-bottom

offsetWidth和offsetHeight : 就是指盒子的Width+padding-left+padding-right+border和Height+padding-top+padding-bottom+border

如果盒子没有宽度，clientWidth和 offsetWidth显示为当前浏览器的宽度，会随着浏览器窗口大小改变而改变。如果盒子没有高度，则clientHeight和offsetHeight为0。下图为调整浏览器宽度后，box4和box5的clientWidth，offsetWidth，clientHeight，offsetHeight情况。box4和box5都没有设置宽度，box4内有文字，box5为空盒子。(box4和box5详情见最后代码)。

特别的，当盒子是用文字撑起来的时候，一般浏览器clientHeight和offsetHeight为文字撑起的高度，而IE6的clientHeight为0。

下图是代码中box2的盒模型示例。

上面元素的属性可以用下面代码在不同浏览器中进行验证。

  <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box3{
            width: 100px;
            height: 100px;
            border: 25px solid gold;
            
        }
        .box2{
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 50px solid yellowgreen;
            position: relative;
            
        }
        .box1{
            width: 400px;
            height: 400px;
            padding: 50px;
            border: 50px solid orange;
            margin: 100px auto;
           
        }
    </style>
</head>
<body>
    <div class="box1" id="b1">
        <div class="box2" id="b2">
            <div class="box3" id="b3"></div>
        </div>
    </div>
    <div class="box4" id="b4">
        大家好，我是web初学者Peger,希望大家多多指教！
        大家好，我是web初学者Peger,希望大家多多指教！
        大家好，我是web初学者Peger,希望大家多多指教！
        大家好，我是web初学者Peger,希望大家多多指教！
    </div>
    <div class="box5" id="b5">
           
        </div>
    <script>
        var b1=document.getElementById("b1");
        var b2=document.getElementById("b2");
        var b3=document.getElementById("b3");
        var b4=document.getElementById("b4");
        var b5=document.getElementById("b5");

        console.log(b1.offsetLeft);
        console.log(b2.offsetLeft);
        console.log(b3.offsetLeft);
        console.log(b1.offsetWidth);
        console.log(b2.offsetWidth);
        console.log(b3.offsetWidth);
        console.log(b1.clientWidth);
        console.log(b2.clientWidth);
        console.log(b3.clientWidth);

        console.log("b4 clientW:"+b4.clientWidth);
        console.log("b4 clientH:"+b4.clientHeight);
        console.log("b5 clientW:"+b5.clientWidth);
        console.log("b5 clientH:"+b5.clientHeight);

        console.log("b4 offsetW:"+b4.offsetWidth);
        console.log("b4 offsetH:"+b4.offsetHeight);
        console.log("b5 offsetW:"+b5.offsetWidth);
        console.log("b5 offsetH:"+b5.offsetHeight);
      
    </script>

JavaScript学习总结--元素尺寸，位置

元素的尺寸，位置相关：

猜你喜欢