【前言】
今天有个学生问了道问题,获取元素宽度获取的是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>
.