height/width、offsetheight/offsetwidth、clientheight/clientwidth和scrollheight/scrollwidth的区别

最新推荐文章于 2022-11-01 11:44:01 发布

Woniu_Yu

最新推荐文章于 2022-11-01 11:44:01 发布

阅读量627

点赞数

分类专栏： JS 文章标签： JS width height

本文链接：https://blog.csdn.net/Woniu_Yu/article/details/81044826

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<div id="box" style="width: 100px; height: 100px; padding: 10px;border: 2px solid red; margin: 10px"></div>

$("#box").height(); // 100 是JQuery方法
document.getElementById("box").offsetHeight; // 124 可见区域的高
document.getElementById("box").clientHeight; //120 可见区域的高，不包括边框
document.getElementById("box").scrollHeight; // 120 正文的宽，若没有出现滚动条则与clientHeight 相等
document.getElementById("box").scrollTop; // 出现滚动条， 滚动条之上的高度
document.getElementById("box").style.height; // 100px 会返回px ，若未设置height则会返回空值

$("#box").width(); // 100 是JQuery方法
document.getElementById("box").offsetWidth; // 124 可见区域的宽
document.getElementById("box").clientWidth; // 120 可见区域的宽，不包括边框
document.getElementById("box").scrollWidth; // 120 正文的高，若没有出现滚动条则与clientWidth 相等
document.getElementById("box").style.width; // 100px 会返回px ，若未设置width则会返回空值