Javascript 如何修改CSS样式(网页样式) 补充说明

来源：互联网发布：c语言vector用法编辑：程序博客网时间：2024/06/07 20:25

我写了一片文章：

Javascript 如何访问修改CSS样式(网页样式)

后来发现对这个访问和修改了解的却并不是很深入，访问和修改是不一样的，如果是访问的话，请看我写的《Javascript 如何访问修改CSS样式(网页样式)》，如果是修改的话，就请看本文吧，不过也可以看看《Javascript 如何访问修改CSS样式(网页样式)》，加深一下理解。

注意：javascript访问和修改CSS样式具有不同的方法，能访问的一般能修改，但是，能修改样式的却不一定能访问，也就是在访问时输出为null（或者空），对于这个问题，请看：Javascript 如何访问修改CSS样式(网页样式)

使用 javascript 修改网页样式可以通过

直接改变样式
改变className
改变cssText

三种方式来实现。

这里需要注意的是 javascript 对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果

下面对这三种方式再做一个简单的说明：

1. 改变元素的className

通过改变一个元素的 className，使其变为另外一种样式，这需要事先写一个CSS样式表，定义类选择器

这里需要注意的是：在调用时不再写style，比如：

document.getElementById('div1').style.className="....." 的写法是错误的，应该这样写：

document.getElementById('div1').className="....." 这个一定要注意！！

2. 改变元素的cssText

和改变className不同的是，在改变元素的cssText时，必须加上style，比如正确的写法如下：

document.getElementById('div1').style.cssText="....." 这个一定和上面的对照着看！！

3. 直接改变样式

用法比如：

document.getElementById('div1').style.width="....."；

document.getElementById('div1').style.backgroundColor="....."；等等

下面看一个具体的例子：

mycss.css

.style1{width:500px;height:200px;background-color:pink;}.style2{width:600px;height:100px;background-color:yellow;}.style3{width:300px;height:300px;background-color:green;}.style4{width:400px;height:400px;background-color:blue;}

html

<html>  <link rel="stylesheet" type="text/css" href="mycss.css" />  <head>  <script language="javascript">  function test(eventObj){//获取元素var div1=document.getElementById('div1');window.alert(div1.className);window.alert(div1.style);window.alert(div1.style.cssText);  //这里输出为空if(eventObj.value=="改变className"){div1.className="style2";   //这里不写stylediv1.className="style3";div1.className="style4";} else if(eventObj.value=="改变cssText"){div1.style.cssText="width:400px;height:300px;background-color:blue";  //这里要写style} else if(eventObj.value=="改背景色为红色"){div1.style.backgroundColor="red";} }</script>  </head>  <body > <div id="div1" class="style1">div1</div><input type="button" value="改变className" onclick="test(this)"/><!-- 这里的this就是当前button对象 --><input type="button" value="改变cssText" onclick="test(this)"/><input type="button" value="改背景色为红色" onclick="test(this)"/></body>  </html>

实际运行效果请粘贴代码运行

1 0