style.width和offsetwidth区别

最新推荐文章于 2021-06-17 21:37:37 发布
最新推荐文章于 2021-06-17 21:37:37 发布
阅读量690 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ncut_LJD/article/details/51015226
版权
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。
2.offsetWidth属性仅是可读属性，而style.width是可读写的。
offsetWidth只能读写 不能修改  style.width 既能读写 又能进行修改
3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。
4.style.width仅能返回以style方式定义的内部样式表的width属性值

style.width 是来设置宽度的 要是单独用style.width 是无法获取宽度的

必须 style.width="100px"这么去用


小李讲源码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于js中style.width与offsetWidth的区别(详解)
11-28
作为一个初学者，经常会遇到在获取某一元素的宽度（高度、top值…）时，到底是用 style.width还是offsetWidth的疑惑。 1. 当样式写在行内的时候，如 <div id=”box” xss=removed>时，用 style.width或者offsetWidth都可以获取元素的宽度。 但是，当样式写在样式表中时，如 ＃box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度，而style.width所返回的值为空。 2. style.width 获取的元素宽度只是div的宽度，不包括border、和padding所占的宽度，且
关于style.width和offsetWidth的区别
Tongzhiyong233的博客
05-05 644
1.offsetWidth返回的是width的整数值，会进行round为一个整数，且不带单位px；  而style.width返回的是字符串，即带有单位px。2.offsetWidth是只读属性，不可以修改，只可以获取值。    style.width可读写。3.style.width只能返回style方式定义的内部样式表的width属性值。4.offsetWidth属性可以返回对象的paddin...
style.width与offsetWidth的区别
weixin_34245169的博客
03-31 136
1. style.width只能读取内联样式，offsetWidth都可以读取； 2.style.width读取的值带“px”单位，offsetWidth读取纯数值； 3.style.width获取的只是div的宽度,不包括border和padding所占的宽度, 而offsetWidth获取的宽度是width+border+padding的值(但不包括margin) 4. offset...
style.width 和offsetwidth的区别
weixin_42667420的博客
09-04 871
当我使用JS的时候 , 我发现有时候用style.width不能获取元素的值. 后面我才明白 style.width只能获取当前元素的行间样式,不能获取元素的内部样式 当你的width或者height写在CSS样式中的时候,在JS里你的style不能获取到width, 当你的样式写在行间中的时候就可以获取到: &lt;div id="div1" style="width: 300px;"&...
JS 中的 style.width
qsfwy的专栏
09-01 597
JS 中的 style.width 2009-08-28 16:49 JS 中也可以控制样式表，但 IE 和 FF(FireFix) 对此解释略有不同，以 style.width 为例。 IEid.style.width = "100"; //只带数值，不会出错id.style.width = "100px"; //带数值和单位，不会出错id.style.width = "100p...
offsetWidth与style.width的区别
09-11
在Web开发中，理解和掌握`offsetWidth`与`style.width`的区别是至关重要的，它们都是JavaScript中用于获取HTML元素尺寸的属性，但有着不同的应用场景和返回值。让我们深入探讨这两个属性，以及它们如何影响网页元素...
基于js中style.width与offsetWidth的区别(详解).docx
01-22
基于js中style.width与offsetWidth的区别(详解).docx
JavaScript中offsetWidth的bug及解决方法
10-19
在JavaScript中，`offsetWidth` 是一个非常常用的属性，它用于获取一个元素的总宽度，包括内边距（padding）和边框（border），但不包括外边距（margin）。这个属性在处理元素尺寸变化时非常有用，但在某些特定情况...
html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
weixin_42512836的博客
06-17 406
作为一个初学者，经常会遇到在获取某一元素的宽度(高度、top值...)时，到底是用 style.width还是offsetWidth的疑惑。1. 当样式写在行内的时候，如 时，用 style.width或者offsetWidth都可以获取元素的宽度。但是，当样式写在样式表中时，如 ＃box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度，而style.widt...
CSS中关于:对象.OffsetWidth和对象.Style.width的区别
ZuoMarsNiShang的博客
12-05 2862
1.offsetWidth属性可以返回对象的padding+border+width属性值之和 style.width返回值就是定义的width属性值 2.offsetWidth属性仅是可读属性，而style.width是可读写的 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串 4.style.width仅能返回以style方式定义的内部样式表的widt
style.width 和 offsetWidth
qq_42566295的博客
10-11 162
style.width 返回值是定义的width属性值 返回的是字符串 offsetWidth返回对象的padding+border+width属性值之和，返回的是 Number 型的数字 在这里用一个面试题作为例子来看一下： 写一个traverse函数，输出所有页面宽度和高度大于50像素的节点 function traverse(){ var elements = []; ...
html代码style图片width,HTML Style width用法及代码示例
weixin_39742958的博客
06-10 974
HTML DOM中的Style width属性用于设置或返回元素的宽度，该元素可以是block-level元素或具有固定位置的元素。用法:它用于返回width属性：object.style.width它用于设置width属性：object.style.width = "auto|length|%|initial|inherit"属性值说明auto-该值由浏览器自动设置默认宽度值。length-该值...
试谈style.width和offsetWidth对设置对象宽度区别
novice的博客
07-17 1548
昨天被人叫过去看一个bug。他的bug有一处是这样的：img.style.width = div.style.width / 2; img.style.height = div.style.width / 2;在跟他说明宽度不能用这种方式来设置要用offsetWidth或者offsetHeight 设置之后他问了我一句 为啥同样都是宽度，为啥不能用这种宽度设置要用那种方式设置呢
js原生.style.width或者.width取不到值
菜鸟的博客
01-17 1499
1.元素未设置宽度值。 2.元素设置了宽度值，但，设置在内联或外联样式表中，而非内嵌式的。比如 css代码 p{ background:pink; } html代码 <p id="p1">aaaaaaaaaa</p> PS：虽然这种方式取不到宽度值。但却可以设置元素的宽度值。比如：设置p元素宽度为200px: docu...
CSS盒模型与style.width,offsetWidth,clientWidth的关系
SunShinessx的博客
02-14 934
一。css盒模型分为标准模型和IE模型 1.标准模型：浏览器默认模型，即box-sizing:content-box &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS盒模型&lt;/title&amp
用style设置div的高度和宽度
Jannay的博客
09-09 2298
一、如果要使超出的内容被剪掉，那么：            &lt;div   style="width:100px;height:100px;overflow-x:hidden;overflow-y:hidden;"&gt; content&lt;div&gt; 二、如果不想被剪掉，那么：      &lt;div   style="width:100px;height:100px;over...
style常见属性
qq_38211852的博客
05-12 8302
一、常用属性： 1、Height:设置DIV的高度。 2、Width:设置DIV的宽度。 例： 复制代码代码如下:&lt;div style="width:200px;height:200px;background-color:Black;"&gt; &lt;/div&gt; 3、margin:用于设置DIV的外延边距，也就是到父容器的距离。 例： 复制代码代码如下:&lt;div style="...
document.addEventListener('click', function (e) { w = document.body.offsetWidth; if (w < 400) { card4.style.width = "75%"; card4.style.fontSize = "12px" card4.style.marginLeft = "25%" } else { card4.style.width = "50%"; card4.style.marginLeft = "50%" card4.style.fontSize = "16px" } });
最新发布
06-11
这段代码是使用JavaScript为页面中的某个元素（可能是一个卡片）添加了一个点击事件监听器。当用户点击该元素时，这段代码会检查页面的宽度，如果宽度小于400像素，则该元素的宽度将被设置为75％，字体大小设置为12像素，并将其左边距设置为25％。如果页面宽度大于或等于400像素，则该元素的宽度将被设置为50％，左边距设置为50％，字体大小设置为16像素。这段代码的作用是根据页面宽度自适应调整元素的显示样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值