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. LeetCode算法题-Intersection of Two Arrays II(Java实现)

    这是悦乐书的第208次更新,第220篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第76题(顺位题号是350).给定两个数组,编写一个函数来计算它们的交集.例如: 输入: ...

  2. C# → 数据库

    Database: public static class dbconnection{ static string cons = "data source = (local) ;initia ...

  3. python 管道、数据共享、进程池

    一.管道(Pipe)(了解) (详情参考:https://www.cnblogs.com/clschao/articles/9629392.html) 进程间通信(IPC)方式二:管道(不推荐使用,了 ...

  4. Linux crm 运行

    crm 项目部署 运行 crm 准备代码 django_crm.zip 上传windows中的代码到linux中,可选 lrzsz(只能传单个的文件)或者xftp 使用lrzsz传输,必须压缩代码包 ...

  5. Django-rest-framework 接口实现 认证:(auth | authentication)

    认证:(auth | authentication) REST framework提供了一些开箱即用的身份验证方案,并且还允许你实现自定义方案. 在 rest_framework.authentica ...

  6. Java学习笔记(三)——封装、继承、多态

    一.封装 概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 实现步骤: 修改属性的可见性——设为private. 创建getter/se ...

  7. P1824 进击的奶牛(二分)

    思路:把检验的函数说一下,就是检测的距离x时,是否存在c个隔断相离大于等于x,如果是则返回1,不是则返回0 #include<iostream> #include<cstdio> ...

  8. Linux 实例如何开启 MySQL 慢查询功能

    运行 MySQL 时,查询速度比较慢的语句对数据库的影响非常大,这些慢语句大多是写的不够合理或者大数据环境下多表并发查询造成的.MySQL 自带慢查询功能,能记录查询时间超过参数 long_query ...

  9. 设计模式(5)原型模式(Prototype)

    设计模式(0)简单工厂模式 设计模式(1)单例模式(Singleton) 设计模式(2)工厂方法模式(Factory Method) 设计模式(3)抽象工厂模式(Abstract Factory) 设 ...

  10. 网络爬虫之Url含有中文如何转码

    一:背景 今天在使用Jsoup对一个网站进行数据爬取,发现爬取内容为该搜索结果是0条,请求头啥的都填好,利用Chrome开发者工具发现请求Url路径不含中文,抱着试一试的态度,我复制此段非中文参数进行 ...