JavaScript 操作 CSS 样式表的完整指南

本文整理 JavaScript 控制 CSS 样式的相关方法。

直接修改样式表规则（IE与Firefox兼容）

首先介绍如何通过 JavaScript 修改特定 CSS class 的属性。

<style type="text/css">

.orig {

display: none;

</style>

目标是将该元素的 display 属性从 none 修改为 inline。

解决方案如下：在 Internet Explorer 浏览器中：

document.styleSheets[0].rules[0].style.display = "inline";

在 Firefox 浏览器中：

document.styleSheets[0].cssRules[0].style.display = "inline";

进一步讨论：可以封装一个函数来查找特定名称的样式对象：

function getstyle(sname) {

for (var i=0;i<document.styleSheets.length;i++) {

var rules;

if (document.styleSheets[i].cssRules) {

rules = document.styleSheets[i].cssRules;

} else {

rules = document.styleSheets[i].rules;

for (var j=0;j<rules.length;j++) {

if (rules[j].selectorText == sname) {

//selectorText 属性用于匹配选择器地址，意在获取 rules[j] 对应的类名。如有理解偏差欢迎指正

return rules[j].style;

随后只需调用：

getstyle(".orig").display = "inline";

即可完成修改。

------------------ 注意 document.styleSheets[0].rules[0].style 中，styleSheets[0] 的下标代表页面中的第 N 个 CSS 样式表，其下级 rules[0] 的下标则表示该样式表中的第 N 条样式规则。例如：

<style type="text/css">

.s{display="none";}

.w{display="none";}

</style>

修改 S 类样式：document.styleSheets[0].rules[0].style.display='inline';

修改 W 类样式：document.styleSheets[0].rules[1].style.display = 'inline';

注意：上述方法仅适用于 CSS 与 HTML 结合方式为 <LINK rel="stylesheet" type="text/css" href="" /> 或 <style></style> 的情况。若使用 @IMPORT 导入样式，则此方法无效。

获取与设置元素计算样式

接下来记录 JavaScript 访问 CSS 中样式的方法：

使用 JavaScript 获取和设置 style 属性。

DOM 标准引入了覆盖样式表的概念。当使用 document.getElementById("id").style.backgroundColor 获取样式时，仅能获取 id 元素内联 style 属性中设置的背景色。若内联 style 中未设置 background-color，则返回空值。这意味着如果元素通过 class 属性引用了外部样式表，外部样式表中设置的背景色无法通过此方式获取。若要获取外部样式表中的计算样式，需使用 window 对象的 getComputedStyle() 方法，代码如下：window.getComputedStyle(id,null).backgroundColor

然而存在兼容性问题，该写法在 Firefox 中有效，但在 Internet Explorer 中无效。

兼容两者的写法为：

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];

若获取背景色，Firefox 和 IE 的返回值格式不同：IE 返回类似 "#ffff99" 的十六进制字符串，而 Firefox 返回 "rgb(238, 44, 34)" 格式的字符串。

值得注意的是：window.getComputedStyle(id,null) 仅能获取样式，无法设置样式。若要设置样式，仍需使用类似 id.style.background="#EE2C21"; 的方式。

在 IE 中，currentStyle 仅支持以只读方式获取样式。

本文仅供学习参考，内容摘录自网络资料并整合而成，无任何版权限制，可任意转载。如原作者有不同意见，可随时联系。

以下仅涉及原生 JavaScript 实现。

通过JS修改标签Class与Style属性

1. 通过 JS 修改标签的 class 属性值：

class 属性是引用样式表的方法之一，其值为样式表的选择符。改变 class 属性的值即更换了标签引用的样式表，这属于第一种修改方法。

更改标签 class 属性的代码如下：

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 用于获取对应标签的 DOM 对象，也可使用其他获取方法。className 是 DOM 对象的属性，对应标签的 class 属性。字符串为 class 属性的新值，应为已定义的 CSS 选择符。

利用此方法可将标签的 CSS 样式表替换为另一个，或使未应用 CSS 样式的标签应用指定样式。

示例：

 
<style type="text/css">
.txt {
font-size: 30px; font-weight: bold; color: red;
} 
</style>
<div id="tt">欢迎光临！</div>
<p><button onclick="setClass()">更改样式</button></p>
<script type="javascript">
function setClass()
{ 
document.getElementById( "tt" ).className = "txt";
} 
</script>

2. 通过 JS 修改标签的 style 属性值：

style 属性也是引用样式表的方法之一，其值为 CSS 样式表。DOM 对象同样拥有 style 属性，该属性本身是一个对象，其属性与 CSS 属性一一对应。改变 Style 对象的属性即改变对应标签的 CSS 属性值，这属于第二种修改方法。

更改标签 CSS 属性的代码如下：

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) 用于获取对应标签的 DOM 对象，也可使用其他获取方法。style 是 DOM 对象的属性，本身也是一个对象。属性名是 Style 对象的属性名，与某个 CSS 属性相对应。

说明：此方法仅修改单一的 CSS 属性，不影响标签上其他 CSS 属性值。

示例：

 
div id="t2">欢迎光临！</div>
<p><button onclick="setSize()">大小</button>
<button onclick="setColor()">颜色</button>
<button onclick="setbgColor()">背景</button>
<button onclick="setBd()">边框</button>
</p>
<script type="javascript">
function setSize()
{ 
document.getElementById( "t2" ).style.fontSize = "30px";
} 
function setColor()
{ 
document.getElementById( "t2" ).style.color = "red";
} 
function setbgColor()
{ 
document.getElementById( "t2" ).style.backgroundColor = "blue";
} 
function setBd()
{ 
document.getElementById( "t2" ).style.border = "3px solid #FA8072";
} 
</script>