说明
在做可视化平台过程中,由于要各种echarts组件要通过拖拽实现在画布中的布局和大小的缩放,所以用到了js中获取各种宽高相关的内容。通过整理网上内容和自己试验,最终整理以下。
//offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
//offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
//clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
//clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
//style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
//style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
//scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
//scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
程序代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: red;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
<span id="span"></span>
</body>
</html>
<script>
//offsetWidth //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)
//offsetHeight //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)
//clientWidth //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)
//clientHeight //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)
//style.width //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)
//style.height //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)
//scrollWidth //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同
//scrollHeigh //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同
var box = document.getElementById("box");
var span = document.getElementById("span");
var offsetWidth = box.offsetWidth;
var offsetHeight = box.offsetHeight;
var clientWidth = box.clientWidth;
var clientHeight = box.clientHeight;
var scrollWidth = box.scrollWidth;
var scrollHeight = box.scrollHeight;
var width = box.style.width;
var height = box.style.height;
var text = "offsetWidth为:" + offsetWidth + " " +
"offsetHeight为:" + offsetHeight + " " +
"clientWidth为:" + clientWidth + " " +
"clientHeight为:" + clientHeight + " " +
"scrollWidth为:" + scrollWidth + " " +
"scrollHeight为:" + scrollHeight + " " +
"width为:" + width + " " +
"height为:" + height;
span.innerText = text;
</script>
最终执行结果为: