利用原生JavaScript获取样式的方式小结
来源:http://www.ido321.com/930.html
ps:是获取样式,不是设置样式。若没有给元素设置样式值,则返回浏览器给予的默认值。(论坛整理)
1、element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href=”css.css”>加载进来的样式属性
1: var ele = document.getElementById('ele');
2: ele.style.color; //获取颜色
2、window.getComputedStyle():可以获取当前元素所有最终使用的CSS属性值。
1: window.getComputedStyle("元素", "伪类");
这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:before”) 。如果不需要伪元素信息,第二个参数可以是null。也可以通过document.defaultView.getComputedStyle(“元素”, “伪类”);来使用
1: var ele = document.getElementById('ele');
2: var styles = window.getComputedStyle(ele,null);
3: styles.color; //获取颜色
可以通过style.length来查看浏览器默认样式的个数。IE6-8不支持该方法,需要使用后面的方法。对于Firefox和Safari,会把颜色转换成rgb格式。
3、element.currentStyle:IE 专用,返回的是元素当前应用的最终CSS属性值(包括外链CSS文件,页面中嵌入的<style>属性等)。
1: var ele = document.getElementById('ele');
2: var styles = ele.currentStyle;
3: styles.color;
注意:对于综合属性border等,ie返回undefined,其他浏览器有的返回值,有的不返回,但是borderLeftWidth这样的属性是返回值的
4、getPropertyValue():获取CSS样式的直接属性名称
1: var ele = document.getElementById('ele');
2: window.getComputedStyle(ele,null).getPropertyValue('color');
注意:属性名不支持驼峰格式,IE6-8不支持该方法,需要使用下面的方法
5、getAttribute():与getPropertyValue类似,有一点的差异是属性名驼峰格式
1: var test = document.getElementById('test');
2: window.getComputedStyle(test, null).getPropertyValue("backgroundColor");
注意:该方法只支持IE6-8。
下面的获取样式方法兼容IE、chrome、FireFox等
1: function getStyle(ele) {
2: var style = null;
3:
4: if(window.getComputedStyle) {
5: style = window.getComputedStyle(ele, null);
6: }else{
7: style = ele.currentStyle;
8: }
9:
10: return style;
11: }
在JQuery中,常用css()获取样式属性,其底层运作就应用了getComputedStyle以及getPropertyValue方法。
利用原生JavaScript获取样式的方式小结的更多相关文章
- 原生JavaScript支持6种方式获取元素
一.原生JavaScript支持6种方式获取元素 document.getElementById('id'); document.getElementsByName('name'); document ...
- 原生js获取样式
js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...
- JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正. 有四种方法:style,currentStyle,getComputedStyle,rules 与 cssRules方法. 1. st ...
- 使用JavaScript获取样式的属性值
1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 . 在IE浏览器中,使用currentStyle来获取 ...
- 原生JavaScript获取css样式
访问属性:obj.attr 或者 obj['attr'] 通过js访问style属性 : document.getElementById("main").style.backgro ...
- 原生JavaScript 获取下一个/上一个同胞元素
看JavaScript遇到的问题,研究了下 获取上一个或者下一个同胞元素,使用很多人会立马想到JQuery prev() 和 next() 的确非常方便.那么原生的JavaScript该怎么获取 上 ...
- 利用原生Javascript实现计算器(未完待续)
这里,将记录我升级四则运算v1.2的整个过程. 环境检测,杨说检测环境也是可以高兴到手舞足蹈的一件事. 为了实现自动化,Testing,查阅相关资料,我这里使用了node(这里为了npm).yoema ...
- 原生javascript封装动画库
****转载自自己发表于牛人部落专栏的文章**** 一.前言 本文记录了自己利用原生javascript构建自己的动画库的过程,在不断改进的过程中,实现以下动画效果: 针对同一个dom元素上相继发生的 ...
- 10个原生JavaScript技巧
这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利用好的话可以加快网友们的开发速度,提高工作 ...
随机推荐
- React Jest测试
一. var jest = require('jest'); jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel ...
- QT 焦点事件(4种方式的解释,还有委托焦点)
1.setFocusPolicy(...)设置获得焦点的方式 Qt::TabFocus 通过Tab键获得焦点 Qt::ClickFocus 通过被单击获得焦点 Qt::StrongFocus 可通过上 ...
- taglist
http://blog.csdn.net/duguteng/article/details/7412652 这两天看到网上有将vim 改造成功能强大的IDE的blog,突然心血来潮,亲身经历了一下. ...
- IOS键盘收起
1.点击Return按扭时收起键盘 - (BOOL)textFieldShouldReturn:(UITextField *)textField { return [textField resignF ...
- hdu 4911 Inversion (分治 归并排序 求逆序数)
题目链接 题意:给n个数,求交换k次相邻的数之后的最小的逆序数对. 用分治的方法,以前在poj上做过这种题,昨天比赛的时候忘了.... 下面的归并排序还是以前的模板. #include <ios ...
- 基于XMPP的即时通信系统的建立(六)— 开发环境搭建
服务器端 新建空工程 使用Eclipse新建名为openfire的空java工程. 导入源代码 这里使用的是openfire的openfire_src_3_10_3.zip源码. 导入后将目录src/ ...
- 终极解决方案:windows10资源管理器假死
想解决这个问题有以下几点: 1,不要相信所谓的powershell里面输命令可以重装系统自带应用从而解决假死问题! 2,不要相信烂大街的“自启动User Manager”服务可以解决假死问题! 3,不 ...
- Flexigrid自定义显示数据列
近期在搞ExtJs,发现ExJs的Grid相当的强大,后来又搞Jquery时,就对原来的表格不怎么满意了,于是,花了点时间,从网上找了个Grid插件,这个插件功能是比较强大,什么行排序.筛选.分页都有 ...
- UVa 1647 (递推) Computer Transformation
题意: 有一个01串,每一步都会将所有的0变为10,将所有的1变为01,串最开始为1. 求第n步之后,00的个数 分析: 刚开始想的时候还是比较乱的,我还纠结了一下000中算是有1个00还是2个00 ...
- Android Configuration change引发的问题及解决方法(转)
之前在学习Fragment和总结Android异步操作的时候会在很多blog中看到对Configuration Change的讨论,以前做的项目都是固定竖屏的,所以对横竖屏切换以及横竖屏切换对程序有什 ...