用JavaScript修改CSS属性

来源：互联网发布：亲历新疆七五事件知乎编辑：程序博客网时间：2024/04/30 06:56

目前，网页上多数格式都是利用CSS定义，很少使用HTML属性，所以用程序更改CSS属性可以获得更丰富的效果。

利用JavaScript可以修改HTML标签所设置的CSS属性，这样就可以改变标签的样式。

用JavaScript修改标签的样式主要有两种做法：一是用另一个CSS样式表代替标签现在CSS样式表，二是直接修改标签的CSS样式表中的属性。

用JS修改标签的 class 属性值：

class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。

更改一个标签的 class 属性的代码是：

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

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

利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

举例：

效果为：

本例中，按钮用来调用JS函数，在JS函数中，为 <div> 标签设置了class 属性值，把 .txt 样式应用在该标签上。

用JS修改标签的 style 属性值：

style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。DOM 对象也有 style 属性，不过这个属性本身也是一个对象，Style 对象的属性和 CSS 属性是一一对应的，当改变了 Style 对象的属性时，对应标签的CSS 属性值也就改变了，所以这属于第二种修改方法。

更改一个标签的 CSS 属性的代码是：

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

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

说明：这种方法修改的单一的一个CSS属性，它不影响标签上其它CSS属性值。

注意：多数 Style 对象的属性名和 CSS 属性名是不同名的，且 Style 对象的属性名要区分大小写。

比如：CSS的 font-size 属性对应于 Style 对象的 fontSize 属性，CSS的margin-top 属性对应于 Style 对象的 marginTop 属性。

举例：

<div>欢迎光临！</div>
<p><button>大小</button>
<button>颜色</button>
<button>背景</button>
<button>边框</button>
</p>
<script>
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>

可以看到，虽然一些 Style 对象的属性和 CSS 属性不同名，但取值方法是完全一样的，所以我们可以用这种方法修改一个标签的 CSS 属性值。

附录：Style 对象

Style对象是一个 DOM 对象的子对象，它的每个属性都和CSS的属性相对应。

Style对象的引用方法是：

DOM对象.style.Style属性名

Style 对象的属性和 CSS 属性的区别是：

Style 属性要区分大小写，CSS 属性不区分大小写。

由单个单词命名的 Style 属性和 CSS 属性同名。如：color、border、margin、width、height 等。只有一个特例，CSS 的float 属性对应的 Style 属性是 styleFloat 或 cssFloat。

由多个单词组成的 Style 属性命名方法是：第一个单词小写，其后的单词首字母大写。而 CSS 属性是单词间用“-”分隔。如：font-family 对应于fontFamily，background-image 对应于 backgroundImage，border-top-width 对应于 borderTopWidth。

用JS程序修改页面的风格：

document.body.style.Style属性名 = 值;

document.body 对应的是文档的 <body> 标签，它的风格影响的是整个网页的风格。

如：

用JS程序修改标签的风格：

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

document.getElementById( id ) 用于获取拥有指定 id 的标签，它的风格只影响这一个标签的风格。

如：