原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法。
- obj.style
js var _width = obj.style.width;
该方法基本可以忽略,因为他只能获取到内敛样式。而现在很少会写内联样式。当然他有个好处是可读可写,所以可以据此设置元素的样式。 - window.getComputedStyle
js // 语法如下: window.getComputedStyle('元素','伪元素'); var _css = window.getComputedStyle(obj,null); // 不涉及伪元素的可以传null var _width = _css.getPropertyValue('width'); // _css.width
该方法对样式可读不可写,返回一个描述元素最终样式的对象。获取某一个样式的值,可以像访问对象属性那样访问,但建议使用getPropertyValue(propertyName)方法获取(此处属性名不支持Camel-Case,所以要用类似'background-color')。可惜的是该方法在IE低版本(<IE8)是不支持的,所以IE下可以用下面的方法。 - obj.currentStyle
js var _css = obj.currentStyle; var _width = _css.getAttribute('width'); // _css.width
该属性是IE自己的一个属性,也是可读不可写的。需要注意的是此处获取具体样式值的时候,getAttribute(propertyName),其中属性名必须是驼峰式命名。
原生js获取元素的样式信息的更多相关文章
- 原生js获取元素样式
摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...
- 原生js获取元素非行内样式属性的方法
获取当前对象的样式DOM标准中的全局方法 getComputedStyle(obj).width (获取元素的宽度),但在非标准IE浏览器(IE8)以下有兼容问题IE8以下要这样写 obj.curre ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- 原生JS获取元素集合的子元素宽度
有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. ...
- 原生js获取元素的子元素
//使用firstChild //但是下面这种因为有空格,也算其子元素 <lable> <span id="onlinePerson" name="pe ...
- 原生js获取元素的各种位置(大全)
加给元素: offsetLeft (距离定位父级的距离) offsetTop (距离定位父级的距离) offsetWidth (可视宽度) offsetHeight (可视高度) clientLeft ...
- 原生JS获取元素的位置与尺寸
1.内高度.内宽度: 内边距 + 内容框 element.clientWidth element.clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 element.offs ...
- 原生js获取元素style属性
function getStyle(ele,attr){ if( ele.currentStyle ){ return ele.currentStyle[attr]; // ie } else { r ...
- 【封装函数】原生js 获取行内外联样式-兼容IE
var dom=document.getElementsByTagName("div")[0]; console.log(getStyle(dom,"padding-to ...
随机推荐
- BugKu 杂项-这么多数据包
前边的都是些无关紧要,只要有点网络的基础我想应该都能懂,往下看,一直到NO104,这是在干什么? 源ip138一直向目标ip159发送syn握手包,想要建立连接,其实就是端口扫描,原理就是,想和你某个 ...
- CentOS 7 编译安装最新版git
安装wget yum install wget -y 下载最新版本的git源码,并解压 cd /usr/local/src/ wget https://mirrors.edge.kernel.org/ ...
- 编写高性能React组件-传值篇
很多人在写React组件的时候没有太在意React组件的性能,使得React做了很多不必要的render,现在我就说说该怎么来编写搞性能的React组件. 首先我们来看一下下面两个组件 import ...
- LeetCode with Python -> Linked List
21. Merge Two Sorted Lists Merge two sorted linked lists and return it as a new list. The new list s ...
- 【转载】zookeeper使用和原理探究(一)
最近开始看到一些公司在使用zookeeper,本身对此了解的很少,这里看到一篇非常好的文章,因此转载 原贴地址:http://www.blogjava.net/BucketLi/archive/201 ...
- input框的限制(仅数字以及电话号码的限制)
电话号码限制 <input type="text" id="phone" maxlength="11" onkeyup=" ...
- nyoj 题目17 单调递增最长子序列
单调递增最长子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4 输入 ...
- Struts2 标签库与OGNL的使用
- 【bzoj3879】SvT 后缀数组+倍增RMQ+单调栈
题目描述 (我并不想告诉你题目名字是什么鬼) 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始位置来表示), ...
- JMeter 性能测试进阶实战
课程简介 本课程制作的主要目的是为了让大家快速上手 JMeter,期间穿插了大量主流项目中用到的技术,以及结合当今主流微服务技术提供了测试 Dubbo 接口.Java 工程技术具体实施方案,注重实践. ...