javascript操作class和style样式 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 .fontSize22
 8 {
 9     font-size:22px;
10 }
11 .fontWeight
12 {
13     font-weight:bold;
14 }
15 </style>
16 </head>
17 
18 <body>
19 <div id="div1" class="fontSize22 fontWeight"  style="color:red">div实例文本</div>
20 <button onclick="changeStyle()">changeStyle()</button>
21 <script>
22 function changeStyle()
23 {
24     var div1 = document.getElementById("div1");
25     //div1.className = "fontSize22";
26     //div1.className += " fontWeight";
27     //删除单个class=""样式
28     //div1.className = div1.className.replace(/fontSize22/,"");
29     //删除所有class=""样式
30     //div1.removeAttribute("class");
31     //删除style=""中的单个样式
32     div1.style.cssText = div1.style.cssText.replace(/red/,"blue");
33     //删除style=""中的所有样式
34     //div1.style.cssText = "";
35 }
36 </script>
37 </body>
38 </html>

 

posted on 2016-02-13 02:53  cag2050  阅读(1010)  评论(0)    收藏  举报

导航