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. Docker 入门到实践(三)Docker 安装

    注意:不要在没有配置 Docker APT 源的情况下直接使用 apt 命令安装 Docker. 一.准备工作 系统要求 Docker CE 支持一下版本的 Ubuntu 操作系统 Cosmic 18 ...

  2. ORC Creation Best Practices

    Short Description: ORC Creation Best Practices with examples and references. Article Synopsis. ORC i ...

  3. 关于折半法查找的一些总结以及ArrayList类的总结

    一.折半法查找的总结(这算法很好理解,但我花了好久琢磨他有啥用.....) 1.实际意义 折半法查找主要是为了能够很快在一个数组中找出我们所需要的那个元素,与往常我们通过一个一个比较的方法不同,折半法 ...

  4. P2066 机器分配 DP

    题目描述 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国家提供一定的盈利.问:如何分配这M台设备才能使国家得到的盈利最大?求出最大盈利值.其中M≤15,N≤10.分 ...

  5. 【CQOI2011】放棋子

    [CQOI2011]放棋子 在一个n行m列的棋盘里放一些彩色的棋子,使得每个格子最多放一个棋子,且不同颜色的棋子不能在同一行或者同一列.有多少种方法? 例如\(,n=m=3\),有两个白棋子和一个灰棋 ...

  6. 弱省胡策 Magic

    弱省胡策 Magic 求\(n\)个点\(n\)的条边的简单联通图的个数. 毒瘤,还要写高精. 我们枚举环的大小\(k\),\(\displaystyle ans=\sum_{k=3}^nC_n^k ...

  7. Cglib动态代理实现方式

    Cglib动态代理实现方式 我们先通过一个demo看一下Cglib是如何实现动态代理的. 首先定义个服务类,有两个方法并且其中一个方法用final来修饰. public class PersonSer ...

  8. UVA1471-Defense Lines(思维+STL)

    Problem UVA1471-Defense Lines Accept: 297  Submit: 2776Time Limit: 9000 mSec Problem Description Aft ...

  9. 关于CUDA,cuDNN,TF,CUDA驱动版本兼容问题

    实际工作当中,经常维护好几个项目的代码,不同项目依赖的TF版本不一致问题.网上找了好多资料,但是每次遇到的问题都不一样,每次都要去查(就是是一样的问题,解决办法也可能会不一样)每次踩坑无数,今天痛定思 ...

  10. [2] TensorFlow 向前传播算法(forward-propagation)与反向传播算法(back-propagation)

    TensorFlow Playground http://playground.tensorflow.org 帮助更好的理解,游乐场Playground可以实现可视化训练过程的工具 TensorFlo ...