本人经过整理总结出以下获取样式值的方法,如有错误请各位大佬指正。 有四种方法: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. range分表

    按主键范围进行分表,假设当前主键的最大值为5000,把数据拆成5等份 1-1000:是5000的第1个范围,把该范围的数据作为一张表 1001-2000:是5000的第2个范围,把该范围的数据作为一张 ...

  2. MQTT协议实现Eclipse Paho学习总结二

    一.概述 前一篇博客(MQTT协议实现Eclipse Paho学习总结一) 写了一些MQTT协议相关的一些概述和其实现Eclipse Paho的报文类别,同时对心跳包进行了分析.这篇文章,在不涉及MQ ...

  3. Vue中使用jquery

    在vue项目中,需要实现某些特定的功能时,使用mvvm模式不易实现.因此引入jquery包来完成需求 npm install jqueryimport $ from jquery //在需要使用的页面 ...

  4. Lxc容器基本用法

    你将学到什么 如何安装LXC 如何创建LXC容器 如何管理LXC容器 如何查询进程所属Namespace 如何给LXC容器添加网卡 如何限制LXC容器资源 环境 x64 Ubuntu 14.04.3 ...

  5. unity 3d 之合并网格和贴图(combine mesh and texture)

    https://www.cnblogs.com/eangulee/p/3877824.html unity 3d 之合并网格和贴图(combine mesh and texture)   本人是个小白 ...

  6. Oracle表连接(转)

    表之间的连接 Join是一种试图将两个表结合在一起的谓词,一次只能连接2个表,表连接也可以被称为表关联.在后面的叙述中,我们将会使用”row source”来代替”表”,因为使用row source更 ...

  7. Luogu P1768 天路 0/1分数规划+dfs spfa

    “那是一条神奇的天路诶~~把第一个神犇送上天堂” 怕不是某大佬早就A了这题,然鹅我又调了很久很久... 好吧就是0/1分数规划,但是跑的dfs的spfa(好像题解说bfs过不了????不知) 发现把s ...

  8. bzoj1004 [HNOI2008]Cards【Burnside/Polya】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 一道好题,但并不是好在融合了三个“考点”(计数,背包dp,逆元),其实背包dp以及求逆 ...

  9. bootstrap multiselect的使用 多选下拉菜单

    官网网址: http://davidstutz.de/bootstrap-multiselect/

  10. 将GPT转换成MBR

    准备一个pe启动盘 1.单击”运行“在弹出来的窗口输入cmd回车 2.在输入“diskpart”回车 3.在输入“list disk”显示硬盘信息,查看那个盘是gpt分区类型 4.输入“select ...