获取元素尺寸（JavaScript 和 jQuery）

最新推荐文章于 2024-04-12 17:46:48 发布

MrShyZhang

最新推荐文章于 2024-04-12 17:46:48 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： JavaScript 元素尺寸

本文链接：https://blog.csdn.net/thunderevil35/article/details/80472370

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在写代码的时候要经常用的元素宽、高，可以通过getComputedStyle(dom)["width"]，但是有点麻烦，dom提供了获取元素宽高值的快捷方式。

getComputedStyle

返回值类型：字符串string

返回值：内容宽 content

JavaScript快捷获取元素尺寸

1. clientWidth 获取元素的（content + padding）宽

element.clientWidth

返回值类型：数值number

返回值：内容宽 content + padding

2. clientHeight 获取元素的（content + padding）高

element.clientHeight

返回值类型：数值number

返回值：内容高 content +padding

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100px;
			height: 100px;
			padding: 10px;
			border: 10px solid blue;
			background-color: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		// 在写代码的时候要经常用的元素宽、高， 可以通过getComputedStyle， 但是有点麻烦，
		// dom提供了获取元素宽高值得快捷方式
		// 获取元素
		var box = document.getElementById("box");
		// 元素的宽度    
		console.log("clientWidth是:" + box.clientWidth) 
		console.log("clientHeight是:" + box.clientHeight) 
		console.log(getComputedStyle(box)["width"])
		// 结论： clientWidth 包含的是 content + padding 
		// 输出的类型是 number
		// getComputedStyle(box)["width"] 内容宽 content
		// 输出的类型是 string
	</script>
</body>
</html>

3. offsetWidth 获取元素的（content + padding + border）宽

element.offsetWidth

返回值类型：数值number

返回值：内容宽 content + padding + border

4. offsetHeight 获取元素的（content + padding + border）高

element.offsetHeight

返回值类型：数值number

返回值：内容高 content + padding + border

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100px;
			height: 100px;
			padding: 10px;
			border: 10px solid blue;
			margin: 10px;
			background-color: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		// 在写代码的时候要经常用的元素宽、高， 可以通过getComputedStyle， 但是有点麻烦，
		// dom提供了获取元素宽高值得快捷方式
		// 获取元素
		var box = document.getElementById("box");
		// 元素的宽度    
		console.log("offsetWidth是:" + box.offsetWidth) 
		console.log("offsetHeight是:" + box.offsetHeight) 
		// 结论：offsetWidth 包含的是  content + padding + border
		// 输出的类型是 number
	</script>
</body>
</html>

总结：

clientWidth	获取元素content + padding 的宽
clientHeight	获取元素content + padding 的高
offsetWidth	获取元素content + padding + border 的宽
offsetHeight	获取元素content + padding + border 的高

5. clientLeft 获取元素左边框的值

element.clientLeft

返回值类型：数值number

返回值： border-left的值

6. clientTop 获取元素上边框的值

element.clientTop

返回值类型：数值number

返回值： border-top的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			width: 100px;
			height: 100px;
			padding: 20px;
			border: 30px solid blue;
			margin: 10px;
			background-color: red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		// 在写代码的时候要经常用的元素宽、高， 可以通过getComputedStyle， 但是有点麻烦，
		// dom提供了获取元素宽高值得快捷方式
		// 获取元素
		var box = document.getElementById("box");
		// 元素的宽度    
		console.log("clientLeft值是:" + box.clientLeft) 
		console.log("clientTop值是:" + box.clientTop) 
		// 结论： clientLeft 指得是元素的左边框距离。
		// 结论： clientTop 指得是元素的上边框距离。
	</script>
</body>
</html>

总结：

clientLeft	获取元素的左边框的值
clientTop	获取元素的上边框的值

jQuery快捷获取元素尺寸

jQuery方法	返回值含义	返回值类型
element.width()	获取元素 content 部分的宽	number
element.height()	获取元素 content 部分的高	number
element.innerWidth()	获取元素 content + padding 部分的宽	number
element.innerHeight()	获取元素 content + padding 部分的宽	number
element.outerWidth()	获取元素 content+ padding + border 部分的宽	number
element.outerHeight()	获取元素 content+ padding + border 部分的宽	number
element.outerWidth(true)	获取元素 content+ padding + border + margin 部分的宽	number
element.outerHeight(true)	获取元素 content+ padding + border + margin 部分的宽	number

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		#box {
			float: left;
			width: 100px;
			height: 100px;
			padding: 20px;
			border: 30px solid blue;
			margin: 10px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	// // content 部分
	// console.log($("#box").width())
	// console.log($("#box").height())

	// content + padding 
	// console.log($("#box").innerWidth())
	// console.log($("#box").innerHeight())

	// content + padding + border
	// console.log($("#box").outerWidth())
	// console.log($("#box").outerHeight())

	// content + padding + border + margin
	console.log($("#box").outerWidth(true))
	console.log($("#box").outerWidth(true))

	</script>
</body>
</html>

MrShyZhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
获取元素尺寸（JavaScript 和 jQuery）

在写代码的时候要经常用的元素宽、高，可以通过getComputedStyle(dom)["width"]，但是有点麻烦，dom提供了获取元素宽高值的快捷方式。 getComputedStyle 返回值类型：字符串string 返回值：内容宽 contentJavaScript快捷获取元素尺寸 1. clientWidth 获取...
复制链接

扫一扫