javascript中-是不能做屬性，類名的。所以在CSS中背景色是background-clolor,而javascript中則是style.background;元素樣式名是class，在javascript中是className屬性;font-size->style.fontSize;margin-top->style.marginTop

3.單獨修改控件的樣式<input type="button" value="AAA" onclick="this.style.color='red'" />

1.舉例1

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>動態(tài)修改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. 示例:動態(tài)修改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>

3. 示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>動態(tài)設置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函數(shù)為input元素的onblur事件的響應函數(shù)
  inputs[i].onblur = txtOnBlur;
 }
 }
 }
 function txtOnBlur() {
 /*
 txtOnBlur是onblur的響應函數(shù)，而不是被響應函數(shù)調(diào)用
 的函數(shù)，所有可以用this來取的發(fā)生事件控件的對象
 */
 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>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章: