编程语言
首页 > 编程语言> > JavaScript学习总结--元素尺寸,位置

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

作者:互联网

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

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

本文主要介绍总结了我学习中遇到的元素尺寸,位置相关属性,下一篇介绍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与高级浏览器不同,这里分两种情况:

  1. 定位了的元素的offsetParent与高级浏览器一样。
  2. 没有定位的元素的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>

 

 

标签:padding,JavaScript,console,log,元素,clientWidth,b5,尺寸,offsetWidth
来源: https://blog.csdn.net/ypp521/article/details/89313012