JavaScript获取样式值的几种方法学习总结
本人经过整理总结出以下获取样式值的方法，如有错误请各位大佬指正。 有四种方法：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获取样式值的几种方法学习总结的更多相关文章
- Javascript获取value值的三种方法及注意点
JavaScript获取value值,主要有以下三种: 1.用document.getElementById(“id名”).value来获取(例1): 2.通过form表单中的id名或者name名来获 ...
- Extjs获取input值的几种方法
记录一下: ExtJs获取文本框中值的几种方式 EXTHTML 1.Html文本框 如: 获取值的方式为: var tValue = Ext.getDom('test').value; 或者 var ...
- Javascript获取html元素的几种方法
1.通过id获取html元素 <!DOCTYPE html> <html> <head lang="en"> <meta charset= ...
- javascript 获取html元素的三种方法
操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
- Selenium获取input值的两种方法：WebElement.getAttribute("value")和WebElement.getText()
在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...
- JavaScript获取鼠标位置的三种方法
在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...
- [TimLinux] JavaScript 获取元素节点的5种方法
1. getElementById document.getElementById("id_value") # 返回值为Node对象,没有元素时,返回 == undefined值( ...
- 关于JS获取select值的两种实现方法
前几天发了一篇关于javascript获取select值的方法,后来发现有另一种实现方法,所以就都发出来比较一下: 方法一:通过获取option标签的value值来确定: <!DOCTYPE h ...
- JAVA中获取文件MD5值的四种方法
JAVA中获取文件MD5值的四种方法其实都很类似,因为核心都是通过JAVA自带的MessageDigest类来实现.获取文件MD5值主要分为三个步骤,第一步获取文件的byte信息,第二步通过Messa ...
随机推荐
- 22. CTF综合靶机渗透(十五)
靶机说明: Game of Thrones Hacking CTF This is a challenge-game to measure your hacking skills. Set in Ga ...
- (linux)安装redis---简装
redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcached类似,但很大程度补偿了memcached的不足,它支持存储的value类型相对更多,包括strin ...
- Codeforces Round #558 (Div. 2)C(计算几何，排列组合，模拟)
#include<bits/stdc++.h>using namespace std;typedef struct{ double k,b;}node;node k[1000007];bo ...
- 2017-11-8 NOIP模拟赛
1.足球联赛 #include<iostream> #include<cstdio> #include<cstring> #include<algorithm ...
- bzoj3720: Gty的妹子树（树分块）
传送门 好珂怕…… 树分块是什么东西啊……感觉好暴力…… 直接贴一下好了->这里 //minamoto #include<iostream> #include<cstdio&g ...
- 洛谷P4762 [CERC2014]Virus synthesis（回文自动机+dp）
传送门 回文自动机的好题啊 先建一个回文自动机,然后记$dp[i]$表示转移到$i$节点代表的回文串的最少的需要次数 首先肯定2操作越多越好,经过2操作之后的串必定是一个回文串,所以最后的答案肯定是由 ...
- Java 异常处理基本规则，Java异常处理的基本规范
看了团队中原来代码中的异常处理,心碎了一地,稍微对照阿里巴巴的异常处理规范整理了一遍,准备分享一下,Java的异常处理规范&约束. 一.运行异常的扑捉 不要捕获 Java 类库中定义的继承自 ...
- informix 入门简单笔记
informix 查看数据库 服务名字 onstat -c | grep DBSERVER 例如: DBSERVERNAME easycon # Name of default database se ...
- LaTeX使用心得
LaTeX是一个功能强大的,开源的排版工具. 最近教练让我们做课件,我做数论,鉴于LaTeX的数学公式功能强大(而MS办公软件的数学公式简直就是个LJ)和我的学习精神,我决定用LaTeX写课件. 在一 ...
- web综合案例01
web综合案例01 ... .... 内容待添加