大家好，又见面了，我是你们的朋友全栈君。
<!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>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/163055.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
