javascript中offsetWidth,clientWidth,width的区别

最新推荐文章于 2024-08-27 16:35:39 发布

IT瓜哥-杨得朝

最新推荐文章于 2024-08-27 16:35:39 发布

阅读量293

点赞数

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/qq_15103197/article/details/110425954

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

说明

在做可视化平台过程中，由于要各种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>

最终执行结果为：

IT瓜哥-杨得朝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript中offsetWidth,clientWidth,width的区别

说明在做可视化平台过程中，由于要各种echarts组件要通过拖拽实现在画布中的布局和大小的缩放，所以用到了js中获取各种宽高相关的内容。通过整理网上内容和自己试验，最终整理以下。 //offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） //offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） //clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） //client...
复制链接

扫一扫