辨析element.offsetXxxx和element.style.xxxx
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的更多相关文章
- Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别
<divid="test1"> <a href="http://www.hujuntao.com/">设计蜂巢</a> &l ...
- Majority Element(169) && Majority Element II(229)
寻找多数元素这一问题主要运用了:Majority Vote Alogrithm(最大投票算法)1.Majority Element 1)description Given an array of si ...
- 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 ...
- LeetCode(169)Majority Element and Majority Element II
一个数组里有一个数重复了n/2多次,找到 思路:既然这个数重复了一半以上的长度,那么排序后,必然占据了 a[n/2]这个位置. class Solution { public: int majorit ...
- 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 ...
- 【ESRI论坛6周年征文】ArcEngine注记(Anno/ Label/Element等)处理专题 -入门篇
原发表于ESRI中国社区,转过来.我的社区帐号:jhlong http://bbs.esrichina-bj.cn/ESRI/viewthread.php?tid=122097 ----------- ...
- 关于HTML的Element
今天搞HTML的时候,发现了一些操作element的方法.先引用一篇. 1.document.getElementById(id); 2.document.getElementByTagName(t ...
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点
Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...
随机推荐
- PHP中的Session工作原理
一直在使用session存储数据,一直没有好好总结一下session的使用方式以及其工作原理,今天在这里做一下梳理. 这里的介绍主要是基于php语言,其他的语言操作可能会有差别,但基本的原理不变. 1 ...
- LeetCode算法题-Happy Number(Java实现)
这是悦乐书的第188次更新,第190篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第47题(顺位题号是202).编写算法以确定数字是否"幸福". 幸福 ...
- 【PS技巧】如何校正倾斜的图片
1.打开PS,直接拖拽图片. 2.点击[滤镜==>扭曲==>镜头校正],出现校正对话框. 3.点击拉直工具,从右向左滑一条直线. 参考文档: 在Photoshop中如何校正倾斜的图片?
- 在线编辑器ACE Editor的使用
ACE 是一个开源的.独立的.基于浏览器的代码编辑器,可以嵌入到任何web页面或JavaScript应用程序中.ACE支持超过60种语言语法高亮,并能够处理代码多达400万行的大型文档.ACE开发团队 ...
- cookie 处理 以及模拟登陆
cookie的处理 1.手动处理: cookie封装到headers 2.自动处理: 1.获取一个session对象 2.使用session对象进行请求的发送 3.作用:在使用session进行请求发 ...
- python六十七课——网络编程(基础知识了解)
网络编程: 什么是网络编程? 网络:它是一种隐形的媒介:可以将多台计算机使用(将它们连接到一起) 网络编程:将多台计算机之间可以相互通信了(做数据交互) 一旦涉及到网络编程,划分为两个方向存在,一方我 ...
- uva 11728 - Alternate Task(数论)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u011328934/article/details/36409469 option=com_onli ...
- P2080 增进感情(背包DP)
思路:将好感度x+y作为体积, 幸福度x-y作为作为价值, 然后就是一个经典的背包问题了.emmmmm,还可以特判一下,因为幸福度为0时就是最小了,没有必要看后面的了吧. 其实,我自己做的时候,沙雕的 ...
- 【转】PHP获取重定向URL的几种方法
有时候我们会在开发中,经常会遇到有URL 301或 302重定向的情况,这时候我们可能需要获取重定向之后的url,下面我们介绍一下几种获取重定向url的方法: 1.用get_headers函数php自 ...
- 【vue】vue +element 搭建项目,加(解)密
1.安装依赖 cnpm(npm) install --save js-base64 2.应用 import { Base64 } from 'js-base64'; //加密 getEncode(){ ...