修改样式

•易错：修改元素的样式不是设置class属性，而是className属性。案例：网页开关灯的效果。
•修改元素的样式不能this.style="background-color:Red"。
•易错：单独修改样式的属性使用“style.属性名”。注意在css中属性名在JavaScript中操作的时候属性名可能不一样，主要集中在那些属性名中含有-的属性，因为JavaScript中-是不能做属性、类名的。所以CSS中背景颜色是background-color，而JavaScript则是style.backgroundColor；元素样式名是class，在JavaScript中是className属性；(见下面代码)font-size→style.fontSize；margin-top→style.marginTop
•单独修改控件的样式<input type="button" value="AAA" onclick="this.style.color='red'" />。技巧，没有文档的情况下的值属性名，随便给一个元素设定id，然后在js中就能id.style.出来能用的属性。
 
JS中和CSS中属性写法不一样！！！！！
  
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 2 
 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 <html xmlns="http://www.w3.org/1999/xhtml" >
 5 <head>
 6     <title></title>
 7 
 8    //两种方法设置样式：
 9 
10     <style type="text/css">
11         .light{
12             background-color:White;
13         }
14         .dark
15         {
16             background-color:Black;
17         }
18     </style>
19     <script type="text/javascript">
20         function open1() {
21             document.body.className = "light";//还是在修改属性，修改body的属性
22         }
23         function close1() {
24             document.body.className = "dark";
25         }
26          //改变文本框的背景、前景色
27         function change() {
28             var txt = document.getElementById("txt1");
29             //错误 不能这样用。可以把style看成一个只读属性*****
30             //在标签中可以直接给style赋值
31             //txt.style = "background-color:Green";
32             
33             txt.style.backgroundColor = "Green"; //通过style属性设置样式
34             txt.style.color = "red";
35         }
36     </script>
37 </head>
38 <body>
39 <input type="button" value="开灯" onclick="open1()" />
40 <input type="button" value="关灯" onclick="close1()" />
41 
42 <input id="txt1" type="text" value="123" />
43 <input type="button" value="click" onclick=" change() " />
44 </body>
45 </html>

 

 
posted @ 2013-03-24 16:54  Big.Eagle  阅读(161)  评论(0)    收藏  举报