1.易错:修改元素的样式不是设置class属性，而是className属性.class是JS的一个保留关键字。
2.易错:单独修改样式的属性使用"style.属性名"
3.注意在css中属性名和在javaScript中
操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为javaScript中-是不能做属性，类名的。所以在CSS中背景色是background-clolor,而javaScript中则是style.background;
4.元素样式名是class，在javaScript中是className属性
1.举例1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态修改style</title>
<style type="text/css">
.day
{
background-color:Green;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function dayclick() {
var divMain = document.getElementById("divMain");
//注意这里使用的是className而不是class
divMain.className = "day";
}
function nightclick() {
var divMain = document.getElementById("divMain");
divMain.className = "night";
}
</script>
</head>
<body>
<div id="divMain" class="day">
<font color="red">中华人名共和国</font>
</div>
<input type="button" value="白天" onclick="dayclick()" />
<input type="button" value="黑夜" onclick="nightclick()" />
</body>
</html>
2.举例2 动态修改style(模拟开灯，关灯)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black;
}
</style>
<script type="text/javascript">
function switchLight() {
var btnSwitch = document.getElementById("btnSwitch");
if (document.body.className == "day") {
document.body.className = "night";
btnSwitch.value = "开灯";
}
else {
document.body.className = "day";
btnSwitch.value = "关灯";
}
}
</script>
</head>
<body class="night">
<input type="button" value="开灯" id="btnSwitch" onclick="switchLight()" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>动态设置style练习(修改文本框背景色)</title>
<script type="text/javascript">
function IniEvents() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "text") {
//设置txtOnBlur函数为input元素的onblur事件的响应函数
inputs[i].onblur = txtOnBlur;
}
}
}
function txtOnBlur() {
/*
txtOnBlur是onblur的响应函数，而不是被响应函数调用
的函数，所有可以用this来取的发生事件控件的对象
*/
if (this.value.length <= 0) {
this.style.background = "red";
}
else {
this.style.background = "white";
}
}
</script>
</head>
<body onload="IniEvents()">
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
</body>
</html>
<html>
<head>
<title>className属性使用实例</title>
<style>
.one{
border:1px solid;
width:200px;
height:300px;
background:#eeefff;
}
.two{
border:1px solid;
width:300px;
height:350px;
background:#efefef;
}
</style>
</head>
<body>
<div id="a">这是a元素,默认没有指定任何显示方式,点击下面按扭为其添加一个样式</div>
<input type="button" value="添加样式" onclick="add_class()"/>
<div id="b" class="one">这是b元素，已经指定了一个样式，可以点击下面按扭更改其外观</div>
<input type="button" value="更改外观" onclick="up_class()"/>
</body>
<script language="javascript">
function add_class(){
var a = document.getElementById("a");
a.className = "one";
}
function up_class(){
var b = document.getElementById("b");
b.className = "two";
}
</script>
</html>
