本人经过整理总结出以下获取样式值的方法，如有错误请各位大佬指正。 有四种方法：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. 在命令行上启动genymotion虚拟机

    自从有了genymotion,多机联调就解放了,一台电脑运行两个genymotion虚拟机毫无压力,不过也看用的是哪种os image,之前我以为google自己的Nexus应该最适应,哪知道开起来比 ...

  2. [MySQL] Data too long for column 'title' at row 1

    李刚轻量级JavaEE第六章的坑..艹李刚自己有没试过这些代码的啊,6.4这一份HqlQuery.java里需要的表,根本就跟他提供的sql脚本对不上啊..坑爹啊,而且字符编码集也有问题. 出现这个原 ...

  3. 关于.net中的身份认证（AuthorizeAttribute）的问题

    引言 新公司当初面试的时候问了我很多用户验证的问题,这里就把我的对于验证的想法写一下,希望可以有一个系统的学习记录. 一.如何验证 B/S结构的请求是http请求,个人理解的http请求有两个特点:1 ...

  4. ejs使用文档

    EJS是一个javascript模板库,用来从json数据中生成HTML字符串. 功能:缓存功能,能够缓存好的HTML模板: <% code %>用来执行javascript代码 ejs模 ...

  5. JAVA包学习笔记

    包 什么是包 为了使类易于查找和使用,为了避免命名冲突和限定类的访问权限,可以将一组相关类与接口"包裹"在一起形成包. 有可能同名类的存在而导致命名冲突,而位于不同包中的类及时同名 ...

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

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

  7. Mysql-5-数据表的基本操作

    1.创建表:之前需要use database database_name 然后create table 表名(): 例:创建员工表tb_employee1,结构如下表所示 字段名称 数据类型 备注 i ...

  8. [Xcode 实际操作]四、常用控件-(8)UITextField控件的使用

    目录:[Swift]Xcode实际操作 本文将演示文本输入框控件的基本用法. 文本输入框主要用来接收和显示用户输入的内容. 在项目导航区,打开视图控制器的代码文件[ViewController.swi ...

  9. 解读人：刘杰，Targeted Quantitative Kinome Analysis Identifies PRPS2 as a Promoter for Colorectal Cancer Metastasis（PRM-磷酸化激酶定量发现结肠癌转移促进因子-PRPS2）

    关键词:PRM,kinase,colorectal cancer, metastasis, PRPS2 来自加州大学河滨分校的Yinsheng Wang教授应用PRM技术筛选出介导结肠癌细胞转移促进因 ...

  10. spring boot war

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...