javascript中object.className=classname;通過className屬性設置或返回元素的class 屬性，作用為:1.獲取元素的class 屬性2. 為網頁內的某個元素指定一個css樣式來更改該元素的外觀 ...
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. 為網頁內的某個元素指定一個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使網頁顯示動態效果並實現與用戶交互功能。</p> 26 <input type="button" value="添加樣式" onclick="add()"/> 27 <p id="p2" class="one">JavaScript使網頁顯示動態效果並實現與用戶交互功能。</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>
