javascript中控制類名className 屬性

Coder編程 2020-07-25

展開全文

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>javascript中控制類名className 屬性</title>
 6         <style type="text/css">
 7             input{
 8                 font-size: 12px;
 9             }
10             .beijing{
11                 background-color: #4682B4;
12                 color: #FFFFFF;
13             }
14             .guoqing{
15                 font-size: 20x;
16                 font-weight: bold;
17             }
18         </style>
19     </head>
20     <body>
21         <div id="con" class="beijing">今年國慶想去北京看一看</div>
22         <form action="" method="post">
23             <input type="button" name="" id="" value="點擊控制" onclick="rec()"/>
24         </form>
25         <script type="text/javascript">
26             var mychar=document.getElementById('con');
27             document.write('此時div的clas的屬性值'+mychar.className)//輸出clas屬性
28             function rec(){
29                 mychar.className='guoqing';//改變class類名
30                 // var myrec=confirm('北京天安門怎么樣');
31                 // if(myrec==true){
32                 //     document.write('是的，我想去');
33                 // }else{
34                 //     document.write('你了，國慶怎么干嘛');
35                 // }
36             }
37         </script>
38     </body>
39 </html>

className 屬性設置或返回元素的class 屬性，語法為//object.className = classname;
"控制類名className屬性"作用:1.獲取元素的class 屬性2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀

測試：通過className屬性來設置元素的樣式:

1.給id="p1"元素通過className添加"類名為one"的樣式。當點擊"添加樣式"按鈕，第一段文字添加樣式。
2.給id="p2"元素通過className修改為"類名為two"的樣式。當點擊"更改外觀"按鈕，第二段文字更改樣式。

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 5 <title>className屬性</title>
 6 <style>
 7     body{ font-size:16px;}
 8     .one{
 9         border:1px solid #eee;
10         width:230px;
11         height:50px;
12         background:#ccc;
13         color:red;
14     }
15     .two{
16         border:1px solid #ccc;
17         width:230px;
18         height:50px;
19         background:#9CF;
20         color:blue;
21     }
22     </style>
23 </head>
24 <body>
25     <p id="p1" > JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
26     <input type="button" value="添加樣式" onclick="add()"/>
27     <p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
28     <input type="button" value="更改外觀" onclick="modify()"/>
29 
30     <script type="text/javascript">
31        function add(){
32           var p1 = document.getElementById("p1");
33           p1.className="one";
34        }
35        function modify(){
36           var p2 = document.getElementById("p2");
37           p2.className="two";
38        }
39     </script>
40 </body>
41 </html>