JS之style.width(height)与offsetWidth(Height)的区别

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打印出来的结果是之前的结果,更改无效
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值