浅谈获取html元素宽高的两种方式-offsetWidth和width的区别

最新推荐文章于 2022-10-20 12:06:10 发布

骆小胖

最新推荐文章于 2022-10-20 12:06:10 发布

阅读量1.1k

点赞数

分类专栏：教学笔录学生提问笔记随笔前端积累常见特效文章标签：教学笔录学生提问笔记随笔前端积累常见特效

本文链接：https://blog.csdn.net/qq_42445490/article/details/88819081

版权

前端积累同时被 3 个专栏收录

105 篇文章 0 订阅

订阅专栏

笔记随笔

75 篇文章 0 订阅

订阅专栏

教学笔录

73 篇文章 0 订阅

订阅专栏

【前言】

今天有个学生问了道问题，获取元素宽度获取的是undefined。这里简单备注，以后重点讲解下。

注意：两种方式的区别是第一种方式可以取到任何情况下的宽高，而第二种方式只能取到html内定义的宽高，而不能取到css定义的宽高。

获取html元素宽高的两种方式
// 首先是取到元素
var main = document.getElementById('main');
// 第一种方式
var mainWidth = main.offsetWidth,mainHeight = main.offsetHeight;
// 第二种方式
var mainWidth2 = main.style.width,mainHeight2 = main.style.height;

【知识点】

offsetWidth和width的区别

1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值
2.offsetWidth属性仅是可读属性，而style.width是可读写的
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位
4.style.width仅能返回以style方式定义的内部样式表的width属性值

【主体】

首先看下demo

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			overflow: hidden;
		}
		ul li{
			float: left;
			list-style: none;
			padding: 10px 20px;
			background: rgba(0,0,0,0.3);
		}

	</style>
</head>
<body>
	<i>这里我想获取li的宽度</i>
	<ul class="list">
		<li>首页</li>
		<li>联系我们</li>
	</ul>
	<script type="text/javascript">
		var li_list0 = document.querySelector(".list > li");//获取第一个li
		var li_list = document.querySelectorAll(".list > li");//获取所有li
		// 1、第一种方式
		console.log(li_list[0].style.width);//undefined
		// 2、第二种方式
		console.log(li_list[0].offsetWidth);//72
	</script>
</body>
</html>