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

最新推荐文章于 2024-03-25 17:06:08 发布

一顆苹果

最新推荐文章于 2024-03-25 17:06:08 发布

阅读量305

点赞数

分类专栏： HTML修炼养成文章标签： offsetWidth clientWidth scrollWidth

本文链接：https://blog.csdn.net/ij_fantasy/article/details/82222024

版权

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

21 篇文章 0 订阅

订阅专栏

<!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>