JavaScript访问CSS属性的几种方式介绍
JavaScript访问CSS属性的方式总体说来有两种：“通过元素访问”、“直接访问样式表”。另外访问样式的时候有一个不可忽略的问题——运行时样式。
1.通过元素访问
既然是要通过元素访问样式表，那么就应该先确定是哪个元素。这是DOM的内容，在此先不多说。获取引用之后就可以通过 “引用.style.要访问的属性” ，来访问某个属性。举个例子，看如下代码。
<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="a"></div>
</body>
</html>
当我们想要获取#a的背景色的时候就可以 document.getElementById("a").style.backgroundColor;这样就完成了访问，之后是要返回还是更改属性值那就随你便了。
2.直接访问样式表
直接访问样式表总的来说就是“先找到相应的样式块，然后在该样式块里找相应的样式规则，最后在该样式规则里找相应的样式”。
先说什么是样式块。在代码中，CSS代码会存在于<style></style>标签之间或<link>之中，一个<style></style>或<link>就是一个样式块。在代码中可能从上到下依次排列着多个代码块，我们可以像访问数组元素一样访问样式块。例如我们要访问样式块中的第一个，就可以document.styleSheets[0]
然后说什么是样式规则。先看如下代码
<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
background-color:red;
}
#b{
height:100px;
width:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
</body>
</html>
代码中分别规定了#a和#b的样式，#a的样式的集合或#b的集合就是一个样式规则。在这个样式块中，对#a的是第一个样式规则，对#b的是第二个样式规则。我们同样可以像访问数组元素一样访问样式规则。例如我们要访问#b样式规则，就可以document.styleSheets[0].cssRules[1] 当然你可以选择这么写document.styleSheet[0].rules[1]但这种写法不被Firefox支持。
然后我们就可以访问相应的样式了。例如我们要把#b的背景色改成绿色，就可以document.styleSheets[0].cssRules[1].style.backgroundColor="green";
3.运行时样式
看如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#a{
height:100px;
width:100px;
color:red;
}
#b{
height:100px;
width:100px;
}
</style>
</head>
<body>
<div id="a">
<div id="b">观察字体颜色</div>
</div>
</body>
</html>
当我们运行alert(document.getElementById("b").style.color);的时候发现弹窗上什么都没输出，但页面的字体颜色明明是红色，为啥呢？这是因为每个元素的style对象属性并不是即时更新的。当我们要弹窗上输出红色的时候就要用运行时样式。window.getComputedStyle(document.getElementById("b"),null).color这样就可以访问到“红色”。访问运行时样式也有另外一种写法document.getElementById("b").currentStyle.color 但这种写法只有IE支持。
相关文章
最近做项目，有需求实现一个字符逐个出现，类似于打字机效果，于是上网搜了相关资料，接下来，小编就给大家详细介绍基于Css3和JQuery实现打字机效果，需要的朋友可以参考下2015-08-08
Bootstrap每天必学之导航，本文讲解的就是大家在做项目时一定会接触到的导航，感兴趣的小伙伴们可以参考一下2015-11-11
本篇文章是对加载远程图片时,经常因为缓存而得不到更新的解决方法进行了详细的分析介绍，需要的朋友参考下2013-06-06
对于学习JavaScript的初学者来说，变量提升是绕不过去的一个知识点,简单来说变量提升就是 JS会把var变量的声明自动提升到作用域的顶部,这篇文章主要给大家介绍了关于JavaScript变量提升的相关资料,需要的朋友可以参考下2021-09-09
这篇文章主要介绍了JS FormData对象使用方法,结合实例形式详细分析了FormData对象的基本功能、原理及使用方法,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了cropper js基于vue的图片裁剪上传功能的相关资料,需要的朋友可以参考下2018-03-03
这篇文章主要介绍了SpringMVC返回json数据的三种方式的相关资料,需要的朋友可以参考下2015-12-12
JavaScript中扩展Array contains方法实例
这篇文章主要介绍了JavaScript中扩展Array contains方法实例,本文直接给出实现代码,需要的朋友可以参考下2015-03-03
Map对象在JavaScript中提供了一种灵活且高效的键值对存储方式,它具有许多实用的方法,如set()、get()、has()和delete()等,使得操作和管理键值对变得更加简单,这篇文章主要介绍了JS中map属性,需要的朋友可以参考下2024-08-08
引用类型的值是应用类型的的一个实例，对象是某个特定引用类型的实例。新对象是使用new操作符后跟一个构造函数创建的。下面我们就从一个小例子烂研究下这个问题吧。2015-04-04
最新评论