<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt="";
txt+="1div 宽度: " + $("#div1").width() + "</br> \n";
txt+="2div 高度: " + $("#div1").height() + "</br> \n";
txt+="3div innerWidth: " + $("#div1").innerWidth() + "</br> \n";
txt+="4div innerHeight: " + $("#div1").innerHeight() + "</br> \n";
txt+="5div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br> \n";
txt+="6div 高度,包含内边距和边框: " + $("#div1").outerHeight()+ "</br> \n";
txt+="7div 宽度,包含内边距和边框外边距: " + $("#div1").outerWidth(true) + "</br> \n";
txt+="8div 高度,包含内边距和边框外边距: " + $("#div1").outerHeight(true)+ "</br> \n";
var elmnt = document.getElementById("div1");
txt += "1在页面上返回内容的可视宽度(宽度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条): " + elmnt.clientWidth + "</br> \n";
txt += "2在页面上返回内容的可视高度(高度包含内边距(padding),不包含边框(border),外边距(margin)和滚动条): " + elmnt.clientHeight + "</br> \n";
txt += "3宽度,包含内边距和边框: " + elmnt.offsetWidth + "</br> \n";
txt += "4宽度,包含内边距和边框: " + elmnt.offsetHeight + "</br> \n";
txt += "5返回元素的整个宽度(包括带滚动条的隐蔽的地方): " + elmnt.scrollWidth + "</br> \n";
txt += "6返回整个元素的高度(包括带滚动条的隐蔽的地方): " + elmnt.scrollHeight + "</br> \n";
txt += "7表示一个元素的左边框的宽度,以像素表示。: " + elmnt.clientLeft + "</br> \n";
txt += "8表示一个元素的顶部边框的宽度,以像素表示。: " + elmnt.clientTop + "</br> \n";
txt += "9返回当前视图中的实际元素的左边缘和左边缘之间的距离: " + elmnt.scrollLeft + "</br> \n";
txt += "10返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离: " + elmnt.scrollTop + "</br> \n"
txt += "11返回当前元素的相对水平偏移位置的偏移容器: " + elmnt.offsetLeft + "</br> \n";
txt += "12返回当前元素的相对垂直偏移位置的偏移容器: " + elmnt.offsetTop + "</br> \n"
$("#div1").html(txt);
console.log(txt)
});
});
</script>
</head>
<body style="padding:10px;margin:10px;border:15px solid red;background-color:#ccc;">
<div id="div1" style="white-space: nowrap;overflow:scroll;height:300px;width:500px;padding:10px;margin:10px;border:15px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div 元素的尺寸</button>
<p>outerWidth() - 返回元素的宽度 (包含内边距和边框)。</p>
<p>outerHeight() - 返回元素的高度 (包含内边距和边框)。</p>
</body>
</html>
jq,js,获取div宽高和边距的方法对比
于 2023-05-08 10:08:21 首次发布