offsetWidth、clientWidth、width、scrollWidth区别及获取

最新推荐文章于 2025-06-21 19:10:49 发布

原创最新推荐文章于 2025-06-21 19:10:49 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#offsetWidth #clientWidth #scrollWidth

HTML修炼养成专栏收录该内容

21 篇文章

订阅专栏

博客围绕offsetWidth、clientWidth和scrollWidth展开，虽无具体内容，但这些是前端开发中用于获取元素尺寸的重要属性，在处理页面布局和元素显示时十分关键。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>offsetWidth、clientWidth、width、scrollWidth区别及获取</title>
    <style>
    .box {
        width: 100px;
        height: 100px;
        padding:0 10px;
        border: 1px solid black;
        background: red;
        margin: 10px;
    }
    </style>
</head>

<body>
    <div class="box" id="box"></div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
 	<script>
 		var oDiv = document.getElementById('box');

 		var a = oDiv.offsetWidth;   //元素宽度 =  width + padding + border  只读
 		var b = $(oDiv).outerWidth(false);  //参数为true的话就包括margin

 		var c = oDiv.offsetHeight;  //元素高度 = height + padding + border  只读
 		var d = $(oDiv).outerHeight(false);  //参数为true,包括margin

 		var e = oDiv.clientWidth;  //元素宽度 = width + padding  只读
 		var f = $(oDiv).innerWidth();

 		var g = oDiv.clientHeight;  //元素高度 = height + padding 只读
 		var h = $(oDiv).innerHeight();

 		var i = oDiv.style.width; //元素宽度 width  返回的是数字，如10  可读写
 		var j = $(oDiv).width();  //width(val)设置宽度

 		var k = oDiv.style.height; //元素高度 height  需要在html中先赋值才能取到  返回的是字符串 如"10px"  可读写
 		var l = $(oDiv).height();  //height(val) 设置高度

 		var m = oDiv.scrollWidth;  //元素宽度 = width + padding + 溢出尺寸，没有溢出的时候 = clientWidth  可读写
 		var n = oDiv.scrollHeight; //元素高度 = height + padding + 溢出尺寸，没有溢出的时候 = clientHeight  可读写
 	</script>
</body>

</html>