js中 style.width与 offsetWidth的区别
作为一个初学者,经常会遇到在获取某一元素的宽度(高度、top值...)时,到底是用 style.width还是offsetWidth的疑惑。
1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度。
但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而style.width所返回的值为空。
2. style.width 获取的元素宽度只是div的宽度,不包括border、和padding所占的宽度,且宽度值是带单位px的。
offsetWidth 获取的元素宽度为width+border+padding的值(不包括margin),且返回值只为一个数值,不带单位。
如下面的例子所示:
<head><script>window.onload = function(){var box = document.getElementById('box'); console.log(box.style.width); console.log(box.offsetWidth); }
</script></head><body><div id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></div></body>
控制台输出的第一个结果为: 300px
控制台输出的第二个结果为: 308 注:300+ 3x2 +1x2 = 308, 且不带单位
3. style.width 也可以在js中用来设置元素的宽度,而offsetWidth不可以。
如下面的例子所示:
<script>window.onload = function(){var box = document.getElementById('box');box.style.width = '200px';console.log(box.offsetWidth);console.log(box.style.width);box.offsetWidth = '400px';console.log(box.offsetWidth);console.log(box.style.width);}</script></head><body><div id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></div></body>
控制台输出的结果分别为 208 200px 208 200px
也就是说通过style.width 设置宽度成功,而 通过offsetWidth设置宽度失败。
转载于:https://www.cnblogs.com/ZhongpengWang/p/7819390.html
js中 style.width与 offsetWidth的区别相关推荐
- html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 时,用 style.wid ...
- style.width与offsetWidth的区别
1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带"px"单位,offsetWidth读取纯数值: 3. st ...
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.attr这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因为获 ...
- 比较 width 与 offsetwidth 的区别
比较width 与 offsetWidth 的区别 1.offsetWidth > width element.offsetWidth = element.style.width + eleme ...
- width 与 offsetWidth 的区别
width 与 offsetWidth 的区别 1.宽度值大小:offsetWidth > width element.offsetWidth = element.style.width + e ...
- js中style.display=无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- js中的target与currentTarget的区别转
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- node.js中exports与module.exports的区别分析
前言 关于Node.js中的exports和module.exports,很多时候都比较容易让人混淆,弄不清楚两者间的区别.那么我们就从头开始理清这两者之间的关系. 来源 在开发Node.js应用的时 ...
- js中构造函数与普通函数的区别
构造函数不仅只出现在JavaScript中,它同样存在于很多主流的程序语言里,比如c++.Java.PHP等等.与这些主流程序语言一样,构造函数在js中的作业一样,也是用来创建对象时初始化对象,并且总 ...
最新文章
- LightOJ 1205 Palindromic Numbers
- Java Lambda表达式初探
- socket开发中INADDR_ANY的含义是什么?
- 【ArcGIS遇上Python】ArcGIS Python实现Modis NDVI批量求年最大值
- 《零基础看得懂的C语言入门教程 》——(十三)socket服务端编写
- 学院派 实践派 计算机科学与技术,饶旻现场为boss所在企业“挑错”
- 支配树(洛谷-P5180)
- 48 CO配置-控制-获利能力分析-创建经营组织
- matlab与vc混合编程指导书.doc,vc与matlab混合编程—基于com.doc
- MySQL数据表类型及文件结构
- Day11 JaseSE File类的使用
- excel按模板导出
- 基于车牌形状和颜色的车牌定位
- 红帽linux9.0安装教程,红帽linux9.0安装教程
- 摸鱼 | 远程控制实验室服务器(不在同一局域网)
- 2011款iMac的AirDrop使用方法。
- windows下安装禅道
- 链接、图像、列表、计数器
- web_socket 协同文档编辑
- 发表论文怎样确定刊物的级别
热门文章
- Linux: 两个USB摄像头的数据采集问题
- 论文阅读(3)--SPDA-CNN: Unifying Semantic Part Detection and Abstraction for Fine-grained Recognition
- Spring中抛出异常时,既要要返回错误信息,还要做事务回滚
- NOIP2011提高组day2
- python入门-分类和回归各种初级算法
- 如何使用Python脚本
- 局域主机做服务器,安装DNN,外网访问的解决办法
- java源码导入eclipse_spring framework源码下载并导入eclipse
- 中反应器体积_缠绕管式反应器大幅提高能效,移热能力较列管式反应器提升逾50%...
- java builder pool_每周10道Java面试题:String, String Pool, StringBuilder