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支持。
-
本文向大家介绍JavaScript对象的属性可以通过几种方式访问？，包括了JavaScript对象的属性可以通过几种方式访问？的使用技巧和注意事项，需要的朋友参考一下 可以通过两种方式访问对象属性。一个是.property，另一个是[property]。 语法1 语法2 为了更好地理解，让我们看下面的示例。 在下面的示例中，定义了一个名为“ person”的对象，并以点符号访问其属性。
-
本文向大家介绍Python获取对象属性的几种方式小结，包括了Python获取对象属性的几种方式小结的使用技巧和注意事项，需要的朋友参考一下 本文将简单介绍四种获取对象的方法。 假如有以下的类： 方法一：使用属性运算符 print(xmr.name) 方法二：通过属性字典__dict__ print(xmr.__dict__['name']) 方法三：通过getattr函数 print(getatt
-
本文向大家介绍javaScript使用EL表达式的几种方式，包括了javaScript使用EL表达式的几种方式的使用技巧和注意事项，需要的朋友参考一下 1.可以使用双引号将EL表达式括起来，这个不是对所有的都行，只对适合${param}这种类型 2.可以将其作为javaScript中的函数的参数。 3.使用隐藏表单域将值传过去原理和（1）是一样的！
-
问题内容： 如何使用JavaScript（纯文本或jQuery）获取和设置CSS自定义属性（在样式表中使用过的属性）？ 这是我失败的尝试：单击按钮会更改常规属性，但不会更改自定义属性： 问题答案： 您可以使用：
-
本文向大家介绍浅析C++中boost.variant的几种访问方法，包括了浅析C++中boost.variant的几种访问方法的使用技巧和注意事项，需要的朋友参考一下 Boost.Variant Variant库包含一个不同于union的泛型类，用于在存储和操作来自于不同类型的对象。这个库的一个特点是支持类型安全的访问，减少了不同数据类型的类型转换代码的共同问题。 Variant 库如何改进你的程
-
问题内容： 除了显而易见的事实，第一种形式可以使用变量而不仅仅是字符串文字，是否有理由在另一种形式上使用另一种形式？如果是这样，在哪种情况下？ 在代码中： 上下文：我已经编写了一个代码生成器来生成这些表达式，我想知道哪种更好。 问题答案： 方括号符号允许使用点符号不能使用的字符： 包括非ASCII（UTF-8）字符，如。 其次，方括号表示法在处理以可预测的方式变化的属性名称时非常有用： Round