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的更多相关文章

  1. Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别

    <divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...

  2. Majority Element(169) && Majority Element II(229)

    寻找多数元素这一问题主要运用了:Majority Vote Alogrithm(最大投票算法)1.Majority Element 1)description Given an array of si ...

  3. 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 ...

  4. LeetCode(169)Majority Element and Majority Element II

    一个数组里有一个数重复了n/2多次,找到 思路:既然这个数重复了一半以上的长度,那么排序后,必然占据了 a[n/2]这个位置. class Solution { public: int majorit ...

  5. 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 ...

  6. 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇

    原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...

  7. 关于HTML的Element

    今天搞HTML的时候,发现了一些操作element的方法.先引用一篇. 1.document.getElementById(id);  2.document.getElementByTagName(t ...

  8. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  9. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...

随机推荐

  1. June 16. 2018, Week 24th. Saturday

    Success is the ability to go from one failure to another with no loss of enthusiasm. 成功,就是即使经历过一个又一个 ...

  2. 设置Firefox自动清除缓存,无需手动清除

    1.在firefox的地址栏上输入about:config回车 2.找到browser.cache.check_doc_frequency选项,双击将3改成1保存即可. 那么这个选项每个值都是什么含义 ...

  3. [Java] SpringMVC工作原理之三:ViewResolver

    一.ViewResolver 根据视图的名称将其解析为 View 类型的视图,如通过 ModelAndView 中的视图名称将其解析成 View,View 是用来渲染页面的,也就是将 Model 填入 ...

  4. 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 ...

  5. MySQL高级知识(一)——基础

    前言:MySQL高级知识主要来自尚硅谷中MySQL的视频资源.对于网上视频资源来说,尚硅谷是一个非常好的选择.通过对相应部分的学习,笔者可以说收益颇丰,非常感谢尚硅谷. 1.关于MySQL的一些文件 ...

  6. [BZOJ 2759] 一个动态树好题

    [BZOJ 2759] 一个动态树好题 题目描述 首先这是个基环树. 然后根节点一定会连出去一条非树边.通过一个环就可以解除根的答案,然后其他节点的答案就可以由根解出来. 因为要修改\(p_i\),所 ...

  7. Leetcode:204

    编写一个程序判断给定的数是否为丑数.丑数就是只包含质因数 2, 3, 5 的正整数.统计所有小于非负整数 n 的质数的数量.示例:输入: 10输出: 4解释: 小于 10 的质数一共有 4 个, 它们 ...

  8. [CQOI2018]九连环

    嘟嘟嘟 对于这种找规律的题,我向来是不会的. 通过大佬们的各种打表找规律.神奇dp等方法,我们得到了答案就是\(\lfloor \frac{2 ^ {n + 1}}{3} \rfloor\). 高精是 ...

  9. Oracle常用性能监控语句解析

    转:http://www.cnblogs.com/preftest/archive/2010/11/14/1876856.html 1.监控等待事件select event,sum(decode(wa ...

  10. Python:Day29 信号量、条件变量

    信号量:semaphore 信号量是用来控制线程并发数的.(理解:虽然GIL任意时刻都只有一个线程被执行,但是所有线程都有资格去抢,semaphore就是用来控制抢的GIL的数量,只有获取了semap ...