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. PHP中的Session工作原理

    一直在使用session存储数据,一直没有好好总结一下session的使用方式以及其工作原理,今天在这里做一下梳理. 这里的介绍主要是基于php语言,其他的语言操作可能会有差别,但基本的原理不变. 1 ...

  2. LeetCode算法题-Happy Number(Java实现)

    这是悦乐书的第188次更新,第190篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第47题(顺位题号是202).编写算法以确定数字是否"幸福". 幸福 ...

  3. 【PS技巧】如何校正倾斜的图片

    1.打开PS,直接拖拽图片. 2.点击[滤镜==>扭曲==>镜头校正],出现校正对话框. 3.点击拉直工具,从右向左滑一条直线. 参考文档: 在Photoshop中如何校正倾斜的图片?

  4. 在线编辑器ACE Editor的使用

    ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...

  5. cookie 处理 以及模拟登陆

    cookie的处理 1.手动处理: cookie封装到headers 2.自动处理: 1.获取一个session对象 2.使用session对象进行请求的发送 3.作用:在使用session进行请求发 ...

  6. python六十七课——网络编程(基础知识了解)

    网络编程: 什么是网络编程? 网络:它是一种隐形的媒介:可以将多台计算机使用(将它们连接到一起) 网络编程:将多台计算机之间可以相互通信了(做数据交互) 一旦涉及到网络编程,划分为两个方向存在,一方我 ...

  7. uva 11728 - Alternate Task(数论)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/36409469 option=com_onli ...

  8. P2080 增进感情(背包DP)

    思路:将好感度x+y作为体积, 幸福度x-y作为作为价值, 然后就是一个经典的背包问题了.emmmmm,还可以特判一下,因为幸福度为0时就是最小了,没有必要看后面的了吧. 其实,我自己做的时候,沙雕的 ...

  9. 【转】PHP获取重定向URL的几种方法

    有时候我们会在开发中,经常会遇到有URL 301或 302重定向的情况,这时候我们可能需要获取重定向之后的url,下面我们介绍一下几种获取重定向url的方法: 1.用get_headers函数php自 ...

  10. 【vue】vue +element 搭建项目,加(解)密

    1.安装依赖 cnpm(npm) install --save js-base64 2.应用 import { Base64 } from 'js-base64'; //加密 getEncode(){ ...