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

最新推荐文章于 2021-12-26 16:35:20 发布

liurongsheng123

最新推荐文章于 2021-12-26 16:35:20 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： JS offsetWidth style.width offsetHeight style.height

本文链接：https://blog.csdn.net/liurongsheng123/article/details/79572145

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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打印出来的结果是之前的结果,更改无效

liurongsheng123

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS之style.width(height)与offsetWidth(Height)的区别

JS中style.width(style.height)与offsetWidth(offsetHeight)的区别1:当样式写在行内的时候,比如&lt;div class="item" style="width:100px"&gt;&lt;/div&gt;这时,在js中用style.width与offsetWidth都可以获取到该宽度值比如代码&lt;head&gt; ...
复制链接

扫一扫

专栏目录