JS中style.width和offsetWidth的比较

最新推荐文章于 2019-12-19 11:58:41 发布
最新推荐文章于 2019-12-19 11:58:41 发布
阅读量297 收藏
点赞数
分类专栏： javaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36370731/article/details/82380808
版权

style.width

  1. 获取的元素宽度只是div的宽度，不包括border、和padding所占的宽度，且其值是带单位px的。

  2.  

    只能获取在行内式CSS所添加的width

offsetWidth

  1. offsetWidth 获取的元素宽度为width+border+padding的值（不包括margin），且返回值只为一个数值，不带单位。

  2. 可以获取所有的方式(内嵌，链入，行内)添加的width

做一个有知识的流氓
关注
专栏目录
JS之style.width(height)与offsetWidth(Height)的区别
沙漠皇帝本拉登
03-15 1780
JS中style.width(style.height)与offsetWidth(offsetHeight)的区别 1: 当样式写在行内的时候,比如<div class="item" style="width:100px"></div> 这时,在js中用style.width与offsetWidth都可以获取到该宽度值 比如代码 <head> ...
基于js中style.width与offsetWidth的区别(详解)
10-19
在JavaScript中，`style.width` 和 `offsetWidth` 都是用来获取或设置HTML元素的宽度，但它们之间存在显著的差异。以下是对这两个属性的详细解释： 1. **`style.width`** - `style.width` 返回的是CSS样式中直接...
JavaScript中的style.width/height和offsetWidth/height区别
fisher
09-14 612
关于style.width/height和offsetWidth/height，他们都可以返回对象的宽度，但是两者又有很大的区别。 总结： 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offset
基于js中style.width与offsetWidth的区别
风丶不会停息
03-13 630
作为一个初学者，经常会遇到在获取某一元素的宽度（高度、top值...）时，到底是用 style.width还是offsetWidth的疑惑。1. 当样式写在行内的时候，如 <div id="box" style="width:100px">时，用 style.width或者offsetWidth都可以获取元素的宽度。但是，当样式写在样式表中时，如 ＃box{ width: 100px;...
js的 style.width 取不到元素的宽度值
weixin_30576859的博客
11-26 275
以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度，CSS样式是内联、外联or内嵌，都可用此方式获得元素当前的宽度。 今天想用原生JS想获取一个元素宽度时，写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。 总结...
JS 中的 style.width
fengleihuo的博客
08-18 466
JS 中也可以控制样式表，但 IE 和 FF(FireFix) 对此解释略有不同，以 style.width 为例。 [size=x-large][b]IE[/b][/size] id.style.width = "100"; //只带数值，不会出错 id.style.width = "100px"; //带数值和单位，不会出错 id.style.width = "100px;";...
基于js中style.width与offsetWidth的区别(详解).docx
01-22
### 基于JavaScript中`style.width`与`offsetWidth`的区别详解 #### 一、引言 在前端开发过程中，经常会遇到需要获取或修改DOM元素尺寸的情况。其中，`style.width` 和 `offsetWidth` 是两个常用的方法，用于获取...
offsetWidth与style.width的区别
09-11
在Web开发中，理解和掌握`offsetWidth`与`style.width`的区别是至关重要的，它们都是JavaScript中用于获取HTML元素尺寸的属性，但有着不同的应用场景和返回值。让我们深入探讨这两个属性，以及它们如何影响网页元素...
JavaScript中style.width与offsetWidth的区别详解
"本文详细介绍了JavaScript中style.width与offsetWidth的区别，包括它们的使用场景和返回值的特性。" 在JavaScript中，我们经常需要获取或设置HTML元素的尺寸，这时style.width和offsetWidth两个属性就显得尤为重要...
style.width 和offsetwidth的区别
weixin_42667420的博客
09-04 894
当我使用JS的时候 , 我发现有时候用style.width不能获取元素的值. 后面我才明白 style.width只能获取当前元素的行间样式,不能获取元素的内部样式 当你的width或者height写在CSS样式中的时候,在JS里你的style不能获取到width, 当你的样式写在行间中的时候就可以获取到: <div id="div1" style="width: 300px;"&...
JavaScript的中offsetWidth，的offsetHeight
limlimlim的专栏
01-28 1665
JavaScript的中offsetWidth是什么意思？ 最佳答案：是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变 scrollWidth，clientWidth与offsetWidth的区别 scrollWidth是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。clientWidth是对象可见的宽度，不包滚动条等边线
width这样读取出来是一个字符串，并且带有单位，但是offsetwidth返回的是一个数值。...
weixin_30662539的博客
01-16 313
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=" utf-8"> 5 <title>未定义</title> 6 <style type="text/css"> 7 div{ 8 ...
获取各种宽高度
qq_39958629的博客
08-24 455
height()：返回当前元素的高度（不含单位，不含边框，不含padding，不含margin） css("height")：返回当前元素的高度，带单位，不含边框，不含padding，不含margin innerHeight()：返回当前元素的高度（包括padding，但是不包括border，window和document不适用） outerheight()：返回当前元素的高度（包括padding...
获取元素的大小
qq_39958629的博客
12-19 189
jqeury获取方法 var a = $("#div").width(),//width()返回元素的宽高，不包括padding/border/margin b = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding c = $("#div").outerWidth(),//outerWidth()返回元素的...
js获取元素宽高及位置的几种方法、获取浏览器窗口大小
qq_39025670的博客
06-08 9631
一.获取宽高： 1.行内样式获取宽高： var dom= document.getElementById("div"); var divWidth = dom.style.width; var divHeight = dom.style.height; 注：只能通过行内样式才能获取到。获取到的元素宽高不包括padding和border 2.offset方法获取： var divOffs...
div的宽度width不包括border和padding、margin！！！！！
zhujiaxing666666的专栏
05-13 5678
div的宽度width不包括border和padding、margin！！！！！
jQuery获取元素宽度（element内容、带padding和border、带margin三种）
木子Lee的博客
07-05 6637
分别为$.width()$.innerWidth(）和$.outerWidth()
JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）
热门推荐
张营的技术博客
03-13 4万+
一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。 JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！ var content = $(‘div’). wid
JS获取DOM的高度包括Padding margin border
xtaydwxf1988的专栏
04-21 1万+
var dom=document.getElementById('center'); var marginTop=getStyle(dom,'marginTop'); alert(parseInt(marginTop)); function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值