style.width 和offsetwidth的区别

最新推荐文章于 2021-06-17 21:37:37 发布
置顶 最新推荐文章于 2021-06-17 21:37:37 发布
阅读量871 收藏 2
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42667420/article/details/82381443
版权

当我使用JS的时候 , 我发现有时候用style.width不能获取元素的值.

后面我才明白 style.width只能获取当前元素的行间样式,不能获取元素的内部样式

当你的width或者height写在CSS样式中的时候,在JS里你的style不能获取到width,

当你的样式写在行间中的时候就可以获取到:

<div id="div1" style="width: 300px;">

 

</div>

这样就可以获取到style值,并且获取的style值后面有px

而offsetwidth可以获取行间样式 和内部样式  但是它获取的值后面没有px  是一个单纯的数值

所有一般用offsetwidth获取,用style设置.

行间样式比内部样式高一个等级

这是我的理解

 

丶阿土
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html2canvas ---- canvas里的width和style里面的width区别
weixin_30519071的博客
02-26 2637
今天想要用html2canvas做一个截图保存，参考了一个demo：姑且叫做demo1.html 当然前提是要有html2canvas.js jq可有可无 demo.html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-e...
基于js中style.width与offsetWidth的区别(详解)
10-19
示例代码中，将`box.style.width`设为'200px'后，控制台显示`offsetWidth`为208，这是因为`offsetWidth`还包括边框和内填充。 - 相反，`offsetWidth`不是一个可写的属性，所以尝试直接设置`offsetWidth`的值不会...
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的区别
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区别
不是秃头的程序员小李
03-30 690
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 offsetWidth只能读写 不能修改  style.width 既能读写 又能进行修改 3.offsetWidth属性返回值是整数，而style.widt
试谈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 设置之后他问了我一句 为啥同样都是宽度，为啥不能用这种宽度设置要用那种方式设置呢
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）。这个属性在处理元素尺寸变化时非常有用，但在某些特定情况...
（知识）width、naturalWidth、clientWidth、offsetWidth区别整理
weixin_34417183的博客
03-16 278
今天在做图片裁剪功能的时候，参考了下网友的资料，发现大家对图片宽度的获取方式不尽相同，于是详细整理下各个属性的区别（详细请参考MDN）。 1，HTMLImageElement.width是一个unsigned long 类型反映了 width HTML 属性, 说明图像在CSS像素中渲染的宽度。 2，HTMLImageElement.na...
JS中offsetWidth和width的区别
前端挖掘机
06-11 2126
1.对象.offsetWidth属性可以返回对象的padding+border+contentwidth属性值之和，而tyle.width返回值仅是是我们定义的width属性值。2.offsetWidth属性仅是可读属性，而style.width是可读写的。3.offsetWidth属性返回值是整数，而style.width的返回值是字符串，并且带有单位。4.style.width仅能返回以sty...
width 与 offsetWidth 的区别
AI_rookie的博客
07-13 460
width 与 offsetWidth 的区别 1、宽度值大小：offsetWidth > width element.offsetWidth = element.style.width + element.style.padding + element.style.border；（不包括margin） 2、offsetWidth 属性仅仅可读，而style.width 是可写的； 所以通常用 style.width用作进JavaScript中设置元素的宽度，而offsetWidth不可以。 3、of
style.width,offsetWidth,clientWidth,scrollWidth的区别
dejing9744的博客
09-26 173
style.width,offsetWidth,clientWidth,scrollWidth中只有style.width是可读写，其它都只是可读。 其中style.width，offsetWidth是差不多的，style.width的值带单位而offsetLeft不带单位。 style.width：　　获取或设置 width + padding + border of...
基于js中style.width与offsetWidth的区别
风丶不会停息
03-13 582
作为一个初学者，经常会遇到在获取某一元素的宽度（高度、top值...）时，到底是用 style.width还是offsetWidth的疑惑。1. 当样式写在行内的时候，如 &lt;div id="box" style="width:100px"&gt;时，用 style.width或者offsetWidth都可以获取元素的宽度。但是，当样式写在样式表中时，如 ＃box{ width: 100px;...
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
JS中style.width和offsetWidth的比较
心有猛狗
09-04 258
style.width 获取的元素宽度只是div的宽度，不包括border、和padding所占的宽度，且其值是带单位px的。   只能获取在行内式CSS所添加的width offsetWidth offsetWidth 获取的元素宽度为width+border+padding的值（不包括margin），且返回值只为一个数值，不带单位。 可以获取所有的方式(...
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...
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、付费专栏及课程。

余额充值