辨析element.offsetXxxx和element.style.xxxx

时间:2022-09-07 15:23:00

  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&lpar;169&rpar; &amp&semi;&amp&semi; Majority Element II&lpar;229&rpar;

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

  3. python &plus; web自动化,点击不生效,提示&OpenCurlyDoubleQuote;selenium&period;common&period;exceptions&period;ElementClickInterceptedException&colon; Message&colon; element click intercepted&colon; Element is not clickable at point &lpar;117&comma; 674&rpar;”

    前言: 在做web自动化时,遇到一个缩放了浏览器比例的操作,从100%缩小到80%,再进行点击的时候,弹出报错信息,无法点击 selenium.common.exceptions.ElementCli ...

  4. LeetCode&lpar;169&rpar;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&period;apache&period;logging&period;log4j&period;core&period;appender&period;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&sol; Label&sol;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 &vert; RockingCode

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

  9. &lpar;88&rpar;Wangdao&period;com第二十一天&lowbar;JavaScript 元素节点Element 节点

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

随机推荐

  1. unity web player的debug和log信息

    win8模式下 unity web player的报错信息在如下目录下:C:\Users\xxx\AppData\Local\Temp\UnityWebPlayer\log 注:目录里的文件可能被隐藏 ...

  2. C&num; 加载xml文档文件及加载xml字符串

    //创建XmlDocument对象 XmlDocument xmlDoc = new XmlDocument(); //载入xml文件名 xmlDoc.Load(filename); //如果是xml ...

  3. 使用SQL循环打印&&num;39&semi;&ast;&&num;39&semi;菱形

    菱形每一行都是由n个' ' + n 个'**' + 1个'*' 组成的 例如高度为9的菱形(共print 9次),*最多的一次print为第五次第五次就是0个' '  + 4个'**' + 1个'*' ...

  4. iptables的实战整理

    一.iptables使用场景:             内网情况下使用:在大并发的情况下不要开iptables否则影响性能 二.iptables出现下面的问题:             在yewufa ...

  5. 《MySQL必知必会》学习笔记&lowbar;1

    #选择数据库 USE mysql #返回可用数据库列表 SHOW DATABASES #返回当前数据库中可用表 SHOW TABLES #返回表列 SHOW COLUMNS FROM db #显示特定 ...

  6. ubuntu 百度云

    下载链接:https://pan.baidu.com/s/1HBu5T3PZ8JsS93PgOKnUYw提取密码:6J1A 在终端中输入命令: sudo dpkg -i bcloud_3..1_all ...

  7. ActiveMQ 动态网络链接

    ActiveMQ的broker-broker方式有两种,一种 静态连接一种是动态连接,一般使用静态连接,动态连接了解就好,没有过多的去测试. 1. 多播协议multicast ActiveMQ使用Mu ...

  8. 大数据量 与 UI交互时的处理 总结与心得

    [以下均在主线程中操作时]1.UI直接操作,数据量较大时,直接使用UI会非常慢2.数据驱动操作,数据量较大时,数据与UI的交互效率相比“1”提升明显 总结:但以上这两种操作  都会“较长时间”占用主线 ...

  9. 【原创】如何使用Jmockit进行单元测试

    如何使用jmockit进行单元测试 1. Jmockit简介 JMockit 是用以帮助开发人员编写测试程序的一组工具和API,它完全基于 Java 5 SE 的 java.lang.instrume ...

  10. rpm与yum,at与crontab,sed命令使用

    1.简述rpm与yum命令的常见选项,并举例. rpm——软件包管理系统,它使得在Linux下安装.升级.删除软件包的工作变得容易,并且具有查询.验证软件包的功能. 1)安装选项 命令格式: rpm ...