辨析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 ...
随机推荐
- June 16. 2018, Week 24th. Saturday
Success is the ability to go from one failure to another with no loss of enthusiasm. 成功,就是即使经历过一个又一个 ...
- 设置Firefox自动清除缓存,无需手动清除
1.在firefox的地址栏上输入about:config回车 2.找到browser.cache.check_doc_frequency选项,双击将3改成1保存即可. 那么这个选项每个值都是什么含义 ...
- [Java] SpringMVC工作原理之三:ViewResolver
一.ViewResolver 根据视图的名称将其解析为 View 类型的视图,如通过 ModelAndView 中的视图名称将其解析成 View,View 是用来渲染页面的,也就是将 Model 填入 ...
- C. Edgy Trees Codeforces Round #548 (Div. 2) 并查集求连通块
C. Edgy Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- MySQL高级知识(一)——基础
前言:MySQL高级知识主要来自尚硅谷中MySQL的视频资源.对于网上视频资源来说,尚硅谷是一个非常好的选择.通过对相应部分的学习,笔者可以说收益颇丰,非常感谢尚硅谷. 1.关于MySQL的一些文件 ...
- [BZOJ 2759] 一个动态树好题
[BZOJ 2759] 一个动态树好题 题目描述 首先这是个基环树. 然后根节点一定会连出去一条非树边.通过一个环就可以解除根的答案,然后其他节点的答案就可以由根解出来. 因为要修改\(p_i\),所 ...
- Leetcode:204
编写一个程序判断给定的数是否为丑数.丑数就是只包含质因数 2, 3, 5 的正整数.统计所有小于非负整数 n 的质数的数量.示例:输入: 10输出: 4解释: 小于 10 的质数一共有 4 个, 它们 ...
- [CQOI2018]九连环
嘟嘟嘟 对于这种找规律的题,我向来是不会的. 通过大佬们的各种打表找规律.神奇dp等方法,我们得到了答案就是\(\lfloor \frac{2 ^ {n + 1}}{3} \rfloor\). 高精是 ...
- Oracle常用性能监控语句解析
转:http://www.cnblogs.com/preftest/archive/2010/11/14/1876856.html 1.监控等待事件select event,sum(decode(wa ...
- Python:Day29 信号量、条件变量
信号量:semaphore 信号量是用来控制线程并发数的.(理解:虽然GIL任意时刻都只有一个线程被执行,但是所有线程都有资格去抢,semaphore就是用来控制抢的GIL的数量,只有获取了semap ...