辨析element.offsetXxxx和element.style.xxxx
DOM操作时,经常使用element.style属性,没错,element.style是属性,和几个offsetXxxx属性一样,概念是一样的。
但是style有几个属性,这几个属性和offsetXxxx有很大关系。他们是可以相互转化的。
之所以说转化,是因为他们的值类型不同,element.offsetXxxx的值类型是Number,并且是整型,比如100。而element.style.xxx是带有单位的字符串,比如100px。
所以要相互转化,要使用parseInt对style的数据进行处理。
但是,并不能保证ele.offsetWidth == ele.style.width
但是,并不能保证ele.offsetWidth == ele.style.width
但是,并不能保证ele.offsetWidth == ele.style.width
其他属性也是这样的,因为要搞清楚offsetWidth的概念。
ele.offsetWidth = parseInt( ele.style.width ) + parseInt(ele.style.borderWidth) + parseInt(ele.style.paddingWidth)。
element.offsetXxxx |
element.style |
element.offsetWidth | element.style.width |
element.offsetHeight | element.style.height |
element.offsetLeft | element.style.left |
element.offsetTop | element.style.top |
辨析element.offsetXxxx和element.style.xxxx的更多相关文章
- Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别
<divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...
- Majority Element(169) && Majority Element II(229)
寻找多数元素这一问题主要运用了:Majority Vote Alogrithm(最大投票算法)1.Majority Element 1)description Given an array of si ...
- python + web自动化,点击不生效,提示“selenium.common.exceptions.ElementClickInterceptedException: Message: element click intercepted: Element is not clickable at point (117, 674)”
前言: 在做web自动化时,遇到一个缩放了浏览器比例的操作,从100%缩小到80%,再进行点击的时候,弹出报错信息,无法点击 selenium.common.exceptions.ElementCli ...
- LeetCode(169)Majority Element and Majority Element II
一个数组里有一个数重复了n/2多次,找到 思路:既然这个数重复了一半以上的长度,那么排序后,必然占据了 a[n/2]这个位置. class Solution { public: int majorit ...
- Log4j2 - Unable to invoke factory method in class org.apache.logging.log4j.core.appender.RollingFileAppender for element RollingFileAppender for element RollingFile
问题与分析 在使用Log4j2时,虽然可以正确读取配置文件并生成log文件,但偶然发现控制台打印了异常信息如下: 2018-12-31 17:28:14,282 Log4j2-TF-19-Config ...
- 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇
原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...
- 关于HTML的Element
今天搞HTML的时候,发现了一些操作element的方法.先引用一篇. 1.document.getElementById(id); 2.document.getElementByTagName(t ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点
Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...
随机推荐
- adb入门学习笔记
连接模拟器(模拟器桥接模式) 使用adb devices列出已连接到工作站的设备. 使用adb shell 启动设备或模拟器上的shell. 列出设备已安装的所有软件包 将电脑文件移动到手机模拟器上( ...
- Python中函数partial的应用
函数在执行时,要带上所有必要的参数进行调用.但是,有时参数可以在函数被调用之前提前获知.这种情况下, 一个函数有一个或多个参数预先就能用上,以便函数能用更少的参数进行调用.通过设定参数的默认值,可以降 ...
- 挂载KVM Guest操作系统磁盘
使用虚拟机时, 发现想要修改虚拟机中的文件非常麻烦, 需要启动虚拟机, 然后再登录进去修改. 对于已经关闭的虚拟机, 为了修改一个文件而启动, 非常耽误时间. 对于一个无法启动的虚拟机(比如启动文件损 ...
- DB2常见错误信息
000 00000 SQL语句成功完成01xxx SQL语句成功完成,但是有警告+012 01545 未限定的列名被解释为一个有相互联系的引用+098 01568 动态SQL语句用分号结束+100 0 ...
- Myeclipse2017C版本破解
原文地址: https://blog.csdn.net/qq_33945246/article/details/79589152
- 深入理解Java 注解原理
*注解的用途 注解(Annotation)是JDK1.5引入的新特性,包含在java.lang.annotation包中,它是附加在代码中的一些元信息,将一个类的外部信息与内部成员联系起来,在编 译. ...
- Docker for Windows 中文文档(3)——Docker Settings
Docker设置 Docker运行时,显示Docker鲸鱼. 默认情况下,Docker鲸鱼图标被放置在“通知”区域中. 如果隐藏,单击任务栏上的向上箭头显示. 提示:您可以将鲸鱼固定在通知框外面,使其 ...
- 思考与算法:大脑是cpu、思考是算法
思考与算法:大脑是cpu.思考是算法
- ndim 与 shape的区别
[[ ., ., .], [ ., ., .]] 在上面这个例子中,数组的ndim为2(它有两个维度(简单的辨别两层方括号)). 第一个维度的长度为2,也就是有两个子数组 第二个维度的长度为3,也就是 ...
- [POI2012]SZA-Cloakroom
嘟嘟嘟 一道比较有意思的dp. 这题关键在于状态的设计.如果像我一样令\(dp[i][j]\)表示选到第\(i\)个物品,\(\sum c\)能都等于\(j\)的话,那就是\(O(qnk)\)了,怒拿 ...