比较 width 与 offsetwidth 的区别
比较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、offsetWidth 属性返回值是整数,如果实际值是小数,会根据实际值进行四舍五入操作,返回处理后的整数。width=44.499px
;输出结果为49
;
width=44.5px
;输出结果为45
;
而style.width的返回值是字符串,并且带有单位
width=44.499px
;输出结果为44.499px
;
4、style.width仅仅能返回以style方式定义的内部样式表的width属性值。
因此样式写在行内的时候<div id="box" style="width:100px">
,用style.width
或者offsetWidth
都可以获取元素的宽度;
如果写在css
样式表中的时候,.box{width:100px;}
,此时只能用offsetWidth
来获取元素的宽度,而style.width
所返回的值为空。
比较 width 与 offsetwidth 的区别相关推荐
- html offsetwidth 字符串宽度,基于js中style.width与offsetWidth的区别(详解)
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 时,用 style.wid ...
- width 与 offsetWidth 的区别
width 与 offsetWidth 的区别 1.宽度值大小:offsetWidth > width element.offsetWidth = element.style.width + e ...
- js中 style.width与 offsetWidth的区别
作为一个初学者,经常会遇到在获取某一元素的宽度(高度.top值...)时,到底是用 style.width还是offsetWidth的疑惑. 1. 当样式写在行内的时候,如 <div id=&q ...
- style.width与offsetWidth的区别
1. style.width只能读取内联样式,offsetWidth都可以读取: 2. style.width读取的值带"px"单位,offsetWidth读取纯数值: 3. st ...
- offsetX,offsetLeft,offsetWidth的区别详解
offsetX,offsetLeft,offsetWidth的区别 offsetX/offsetY offsetX和offsetY表示(鼠标位置)相对于最近父级元素的坐标(无论父级是否定位)(不管是谁 ...
- [绍棠] scrollWidth,clientWidth,offsetWidth的区别
说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. ...
- clientWidth offsetWidth的区别
记录js中一些计算元素宽高相关的属性和方法,理解各属性之间的区别及应用场景. clientWidth/clientHeight 内容区域的宽度/高度,不包括边框border的宽度,含padding宽度 ...
- clientWidth offsetWidth innerWidth 区别(窗口尺寸 汇总)
原文链接:http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html scrollWidth 是对象的实际内容的宽,不包边线宽度,会随 ...
- clientWidth、offsetWidth、区别
clientWidth和clientHeigh . clientTop和clientLeft 1,clientWidth的实际宽度clientWidth = width+左右padding2,clie ...
最新文章
- Ubuntu下Django+uWSGI+nginx部署
- 图的遍历:BFS和DFS
- 优化MySQL数据类型——《深究MySQL》
- 返回路径平面上的间隙_裁切机的上刀下刀如何调整?
- 用博客见证自己的成长
- mysql约束类型 A P_sql数据类型与约束总结
- mysql怎么添加约束成绩_mysql怎么添加约束?
- JavaScript学习-函数
- php图片显示不了,如何解决php显示不了图片的问题
- Python-实现九宫格
- word闪退 用endnote_endnote x9 word 中插入参考文献时闪退崩溃
- java 内部类总结_java学习笔记9--内部类总结
- 大学计算机课程进制的转换教程,交大计算机课程(1):各种进制转换
- \u开头的字符串是什么意思?
- Java虚拟机 - JVM是什么?
- iOS应用上传个人头像
- Java后端实习总结--福州之旅
- 绘制同心圆-第12届蓝桥杯Scratch省赛1真题第3题
- java学习书籍推荐
- Cuil搜尋引擎 挑戰Google
热门文章
- nodejs 'no sunch file or no director ,open c:\users\zhou\package.josn'
- Arduino串口通讯,Serial库,RGBled灯示例
- 屏幕后处理故障艺术效果
- R语言中实现作图对象排列的函数总结
- 如何提高移动应用的客户满意度?
- 计算机考证没报上名怎么办
- entity framework异常: Invalid object name 'dbo.xxxxxx'.
- PMP考纲解读 |【人】任务2—领导团队(二)
- 思科三层交换机配置不同VLAN相互通信
- 《大学之路》读后感(2)