JavaScript中宽高和位置的总结

作者: 凋零之落叶 | 来源:发表于2016-08-07 23:01 被阅读27次

JavaScript中宽高和位置的总结
javascript中的各种宽高以及位置总结
Js中宽高和位置的总结
javascript获取网页各种高宽及位置总结
jQuery中宽、高、位置和滚动条总结
js中的各种宽高以及位置总结
js归纳总结——各种宽高以及位置总结
坐标系统
javascript中各种宽高以及event对象的总结
JS中宽高总结

第一部分：原生JavaScript部分

1.clientWidth和clientHeight

描述：content + padding，不包含滚动条和border。

HTML：

<body>
    <div id="test" class="test">
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
        test<br>
    </div>
</body>

CSS：

    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #f5f5d5;
        }
        .test{
            width: 200px;
            height: 200px;
            margin: 100px;
            padding: 20px;
            background-color: #ccc;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            console.log("clientWidth:"+tDiv.clientWidth+" clientHeight:"+tDiv.clientHeight);
        }
    </script>

结果：

Paste_Image.png

2.offsetWidth和offsetHeight

描述：content + padding + border，包含滚动条。

HTML和CSS代码同上：

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            console.log("offsetWidth:"+tDiv.offsetWidth+" offsetHeight:"+tDiv.offsetHeight);
        }
    </script>

结果：

Paste_Image.png

3.scrollWidth和scrollHeight

描述：content(包含滚动区域) + padding，不包含滚动条和border。

HTML和CSS代码同上：

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            console.log("scrollWidth:"+tDiv.scrollWidth+" scrollHeight:"+tDiv.offsetHeight);
        }
    </script>

结果：

Paste_Image.png

总结：

clientWidth = content + padding；
offsetWidth = content + padding + border；
scrollWidth = content(包含滚动区域) + padding。
这三个属性都是只读属性，只能取值，不能赋值。

4.clientLeft和clientTop

描述：对象的边框宽度。clientLeft为左边框宽度，clientTop为上边框宽度。

HTML和CSS代码同上：

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            console.log("clientLeft:"+tDiv.clientLeft+" clientTop:"+tDiv.clientTop);
        }
    </script>

结果：

Paste_Image.png

5.offsetLeft和offsetTop

补充：offsetParent：返回该对象带有定位的最近的父级元素，如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
描述：offsetLeft和offsetTop分别为相对于offsetParent的左边距离和上边距离。

HTML和CSS代码同上：

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            console.log("offsetLeft:"+tDiv.offsetLeft+" offsetTop:"+tDiv.offsetTop);
        }
    </script>

结果：

Paste_Image.png

这里的div父级元素就是body，父级没有定位元素offsetParent就是body，而div的margin为100，所以div的offsetLeft和offsetTop都是100。

6.scrollLeft和scrollTop

描述：当对象内容超出其宽高的时候，元素被卷起的宽度和高度。

HTML和CSS代码同上：

JavaScript：

    <script>
        window.onload = function() {
            var tDiv = document.getElementById("test");
            tDiv.onscroll = function(){
                console.log("scrollLeft:"+tDiv.scrollLeft+" scrollTop:"+tDiv.scrollTop);
            };
        }
    </script>

结果：

Paste_Image.png

总结：

clientLeft是对象的边框宽度；

offsetLeft为相对于offsetParent的左边距离；

scrollLeft为元素被卷起的宽度。
clientLeft和offsetLeft为只读属性，而scrollLeft可以取值，也可以赋值。

7.style.top，style.bottom，style.left，style.right

描述：进行CSS定位（position为absolute或relative）的对象才有的属性。

style.top和offsetTop的区别：

offsetTop可以返回没有定位的元素距离上边的距离，而只有定位的元素才有style.top；

offsetTop返回的值是纯数字，而style.top返回的值带有单位px，所以是字符串；

offsetTop为只读属性，而style.top可读写；

style.top只能获取行内样式设置的值，而offsetTop没有限制；

第二部分：Jquery部分

此处使用的jQuery版本为3.1.0

1.width()和height()

描述：content，不包含滚动条和padding以及border。

HTML和CSS代码同上：

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            console.log("width():"+$tDiv.width()+" height():"+$tDiv.height());
        });
    </script>

结果：

Paste_Image.png

2.innerWidth()和innerHeight()

描述：content + padding，不包含滚动条和border。

HTML和CSS代码同上：

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            console.log("innerWidth():"+$tDiv.innerWidth()+" innerHeight():"+$tDiv.innerHeight());
        });
    </script>

结果：

Paste_Image.png

3.outerWidth()和outerHeight()

描述：content + padding + border。

HTML和CSS代码同上：

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            console.log("outerWidth():"+$tDiv.outerWidth()+" outerHeight():"+$tDiv.outerHeight());
        });
    </script>

结果：

Paste_Image.png

总结：

width() = content;

innerWidth = content + padding;

outerWidth = content + padding +border;
jQuery中的这三个属性不传参数就是取值，传参数就是赋值，详情见jQueryAPI。

4.offset()

描述：获取匹配元素在当前视口的相对偏移。

HTML:

<body>
    <div class="container">
        <div id="test" class="test">
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
            test<br>
        </div>
    </div>
</body>

CSS：

    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: #f5f5d5;
        }
        .container{
            background-color: green;
            width: 400px;
            height: 400px;
            margin: 50px;
            position: relative;
        }
        .test{
            position: absolute;
            top: 30px;
            left: 30px;
            width: 200px;
            height: 200px;
            margin: 100px;
            padding: 20px;
            background-color: #ccc;
            border: 1px solid #000;
            overflow: auto;
        }
    </style>

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            console.log("offset().top:"+$tDiv.offset().top+" offset().left:"+$tDiv.offset().left);
        });
    </script>

结果：

Paste_Image.png

5.position()

描述：获取匹配元素相对父元素的偏移。（不包括margin）

HTML和CSS同上：

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            console.log("position().top:"+$tDiv.position().top+" position().left:"+$tDiv.position().left);
        });
    </script>

结果：

Paste_Image.png

6.scrollTop()和scrollLeft()

描述：获取匹配元素相对滚动条顶部和左侧的偏移。（其值等于原生js中的scrollTop和scrollLeft）

HTML和CSS同上：

JavaScript：

    <script>
        $(function(){
            var $tDiv = $("#test");
            $tDiv.on("scroll",function(){
                console.log("scrollTop():"+$tDiv.scrollTop()+" scrollLeft():"+$tDiv.scrollLeft());
            });
        });
    </script>

结果：

Paste_Image.png