JS中style.width(style.height)与offsetWidth(offsetHeight)的区别
1:
当样式写在行内的时候,比如<div class="item" style="width:100px"></div>
这时,在js中用style.width与offsetWidth都可以获取到该宽度值
比如代码
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.item{
height:100px;
width:200px;
background-color:red;
}
</style>
</head>
<body>
<div class="item" style="width:100px"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
console.log(item.style.width);
console.log(item.offsetWidthsty);
</script>
结果如图
根据结果可知,行内属性,用style.width与offsetWidth都可以获得宽度值
另外说明当css中与行内属性都有设置width的值的时候,行内属性的优先级是高于css中的.
并且style.width是带单位输出来的而offsetWidth是不带单位输出来的
2
当width的值不设置在行内样式上,而是设置在css中的时候,这时在js中用style.width是获取不到宽度值的
而用offsetWidth则可以获得不带单位的宽度值,style.width只能获得行内设置的宽度(高度)值
代码示例:
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.item{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
console.log(item.style.width);
console.log(item.offsetWidth);
</script>
结果截图
3
style.width获取的只是div的宽度,不包括border和padding所占的宽度,
而offsetWidth获取的宽度是width+border+padding的值(但不包括margin)
代码示例
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.item{
height:100px;
background-color:red;
padding:10px 10px; /*上下内边距10px 左右内边距10px*/
margin:20px 20px; /*上下外边距10px 左右外边距10px*/
border:10px blue solid; /* border宽度为10px*/
}
</style>
</head>
<body>
<div class="item" style="width:100px">我无法显示在内边距上</div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
console.log(item.style.width);
console.log(item.offsetWidth);
</script>
结果如图
说明:当已经设置了宽度为100px的前提下,再设置左右两个内边距为10px,这时div的图形会发生变化,
左右宽度会被撑开20px,style.width获得的值为100px,是不包含内边距的值
而offsetWidth获取的值是border的宽度+内边距的宽度+内容的宽度(内边距是不显示内容的),
也就是10*2+10*2+100,等于140
或者代码如下
<head>
<meta charset="UTF-8">
<title>区别</title>
</head>
<body>
<div class="item" style="width:100px;padding:10px 10px"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
console.log(item.style.width);
console.log(item.offsetWidth);
</script>
结果为100px 120
4
在js中,虽然不能用style.width获取到css中的宽度,但却可以在js中调用style.width来设置宽度
而offsetWidth则无法设置宽度,只能读取宽度
说明:offsetTop是个唯一的特例,在js中是可以设置offsetTop的值,从而改变高度的.
代码示例:
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.item{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
item.style.width = "200px";
console.log(item.style.width);
console.log(item.offsetWidth);
</script>
结果截图
这时用style.width于offsetWidth都可以将值打印出来,而行内样式中并没有设置宽度
可css中设置了宽度,之所以都可以输出,是因为在console.log(item.style.width)上面,设置了item.style.width的值,
就好像,设置x=5,然后打印x一样,设置了这个值,肯定可以将这个值打印出来
用offsetWidth设置宽度
<head>
<meta charset="UTF-8">
<title>区别</title>
<style type="text/css">
.item{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div class="item"></div>
</body>
<script type="text/javascript">
var item = document.getElementsByClassName('item')[0];
item.offsetWidth = "200px";
console.log(item.style.width);
console.log(item.offsetWidth);
</script>
结果截图
此时用style.width无法打印出结果,用offsetWidth打印出来的结果是之前的结果,更改无效