本人经过整理总结出以下获取样式值的方法，如有错误请各位大佬指正。 有四种方法：style，currentStyle，getComputedStyle，rules 与 cssRules方法。

1. style

用法：document.getElementById(“id”).style.property=”值”。
例子：

<style>

.yellow{height:200px;width:200px;background: yellow;}

</style>

</head>

<body>

<div id="div1" class="yellow" style="color:red"></div>

<script>

var div1=document.getElementById("div1");

div1.onclick=long;

function long(){

     alert(div1.style.width);//空值

     alert(div1.style.color);//red

     div1.style.color="blue";

     div1.style.width="300px";

     alert(div1.style.color);//blue

     alert(div1.style.width);//300px

}

</script>

总结：style对象只能读写内联样式的值，不能够读写内部样式和外部样式的值。经过测试兼容IE8，Chrome，Firefox浏览器。

2.currentStyle

用法：document.getElementById(“id”).currentStyle.property。

<style>

.yellow{height:200px;width:200px;background: yellow;}

</style>

</head>

<body>

<div id="div1" class="yellow"></div>

<script>

var div1=document.getElementById("div1");

div1.onclick=long;

function long(){

//div1.currentStyle.width="300px";//Uncaught TypeError: Cannot set property 'width' of undefined

alert(div1.currentStyle.width);//200px

}

</script>

总结：currenStyle只能读取元素最终用到的样式值，不能用来设置相关值。经过测试只对IE8浏览器兼容，Chrome和Firefox，Safari不兼容。

3.getComputedStyle

用法：window.getComputedStyle(元素).property

<style>

.yellow{height:200px;width:200px;background: yellow;}

</style>

</head>

<body>

<div id="div1" class="yellow"></div>

<script>

var div1=document.getElementById("div1");

div1.onclick=long;

function long(){

//window.getComputedStyle(div1).width="300px";// Failed to set the 'width' property on 'CSSStyleDeclaration'

alert(window.getComputedStyle(div1).width);//200px

}

</script>

总结：getComputedStyle只能读取元素最终用到的样式值，不能用来设置相关值。经过测试对Chrome和Firefox，Safari兼容，对IE8浏览器不兼容。

4.rules 与 cssRules方法

用法：document.styleSheets[0].rules[0];
document.styleSheets[0].cssRules[0];

<style>

.yellow{height:200px;width:200px;background: yellow;}

#div1{height:300px;}

</style>

</head>

<body>

<div id="div1" class="yellow"></div>

<script>

var div1=document.getElementById("div1");

div1.onclick=long;

function long(){

    if(document.styleSheets[0].rules){//兼容IE8，Chrome，不兼容Firefox

        var s1=document.styleSheets[0].rules[0];

        var s2=document.styleSheets[0].rules[1];

        alert(s1.style.background);//yellow

        alert(s2.style.background);//空值

        s1.style.background="red";//.yellow中背景色设为红色

        s2.style.background="blue";//#div1中背景色设为蓝色，最终根据css就近规则显示蓝色

        alert(s1.style.background);//red

        alert(s2.style.background);//blue

    }else{//兼容Firefox，Chrome，不兼容IE8

        var s1=document.styleSheets[0].cssRules[0];

        var s2=document.styleSheets[0].cssRules[1];

        alert(s1.style.height);//200px

        alert(s2.style.height);//300px

        s1.style.height="400px";

        s2.style.height="600px";

        alert(s1.style.height);//400px

        alert(s2.style.height);//600px

        }

}

</script>

总结：rules和cssRules可以读写内部样式，外部样式的样式值。经过测试Chrome两者都兼容，Firefox兼容cssRules对rules不兼容，IE8浏览器兼容rules对cssRules不兼容。

JavaScript获取样式值的几种方法学习总结的更多相关文章

  1. Javascript获取value值的三种方法及注意点

    JavaScript获取value值,主要有以下三种: 1.用document.getElementById(“id名”).value来获取(例1): 2.通过form表单中的id名或者name名来获 ...

  2. Extjs获取input值的几种方法

    记录一下: ExtJs获取文本框中值的几种方式 EXTHTML 1.Html文本框 如: 获取值的方式为: var tValue = Ext.getDom('test').value; 或者 var ...

  3. Javascript获取html元素的几种方法

    1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...

  4. javascript 获取html元素的三种方法

    操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...

  5. Selenium获取input值的两种方法：WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

  6. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  7. [TimLinux] JavaScript 获取元素节点的5种方法

    1. getElementById document.getElementById("id_value") # 返回值为Node对象,没有元素时,返回 == undefined值( ...

  8. 关于JS获取select值的两种实现方法

    前几天发了一篇关于javascript获取select值的方法,后来发现有另一种实现方法,所以就都发出来比较一下: 方法一:通过获取option标签的value值来确定: <!DOCTYPE h ...

  9. JAVA中获取文件MD5值的四种方法

    JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...

随机推荐

  1. SpringSecurity02 表单登录、SpringSecurity配置类

    1 功能需求 springSecuriy默认的登录窗口是一个弹出窗口,而且会默认对所有的请求都进行拦截:要求更改登录页面(使用表单登录).排除掉一些请求的拦截 2 编写一个springSecurity ...

  2. R语言最好的IDE——RStudio

    转自http://www.dataguru.cn/article-1602-1.html 看到很多的R语言教材,介绍的编辑器或者IDE都是很简陋的那些,就没有见到有人提到RStudio.对于不使用Em ...

  3. 【NLP】中文分词：原理及分词算法

    一.中文分词 词是最小的能够独立活动的有意义的语言成分,英文单词之间是以空格作为自然分界符的,而汉语是以字为基本的书写单位,词语之间没有明显的区分标记,因此,中文词语分析是中文信息处理的基础与关键. ...

  4. java的大小端和转换

    一直以为大小端针对的bit的顺序,今天才知道:大小端的分度值是 byte,即每一个byte都是按照正常顺序,但是byte组装成一个int 或者是 long等时每个byte的摆放位置不同. 测试代码: ...

  5. 1.2 DVWA亲测sql注入漏洞（blind）

    LOW等级     我们尝试输入:   即如果页面返回为假,则说明后面的语句成功注入 据此我们可以知道 1' and 真 --> 页面显示 “User ID exists in the data ...

  6. Python中的矩阵、多维数组：Numpy

    Numpy 是Python中科学计算的核心库.它提供一个高性能多维数据对象,以及操作这个对象的工具.部分功能如下: ndarray, 具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组. 用于对 ...

  7. 洛谷P1164 小A点菜（01背包求方案数）

    P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...

  8. 洛谷P1034 矩形覆盖

    P1034 矩形覆盖 题目描述 在平面上有 n 个点(n <= 50),每个点用一对整数坐标表示.例如:当 n＝4 时,4个点的坐标分另为:p1(1,1),p2(2,2),p3(3,6),P4( ...

  9. Mysql-6-数据类型和运算符

    1.mysql数据类型 (1)数值数据类型:包括整数类型tinyint.smallint.mediumint.int.bigint,浮点小数类型float和double,定点小数类型decimal. ...

  10. springIOC源码解析之Bean的创建

    上一篇讲到了beanFactory的配置文件的解析和beanFactory的创建,都集中到了obtainFreshBeanFactory();这一句代码里了,本篇主要讲bean的创建过程 public ...