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">今年國(guó)慶想去北京看一看</div> 22 <form action="" method="post"> 23 <input type="button" name="" id="" value="點(diǎn)擊控制" onclick="rec()"/> 24 </form> 25 <script type="text/javascript"> 26 var mychar=document.getElementById('con'); 27 document.write('此時(shí)div的clas的屬性值'+mychar.className)//輸出clas屬性 28 function rec(){ 29 mychar.className='guoqing';//改變class類名 30 // var myrec=confirm('北京天安門(mén)怎么樣'); 31 // if(myrec==true){ 32 // document.write('是的，我想去'); 33 // }else{ 34 // document.write('你了，國(guó)慶怎么干嘛'); 35 // } 36 } 37 </script> 38 </body> 39 </html> className 屬性設(shè)置或返回元素的class 屬性，語(yǔ)法為//object.className = classname; 測(cè)試：通過(guò)className屬性來(lái)設(shè)置元素的樣式: 1.給id="p1"元素通過(guò)className添加"類名為one"的樣式。當(dāng)點(diǎn)擊"添加樣式"按鈕，第一段文字添加樣式。 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)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(xiàn)與用戶交互功能。</p> 26 <input type="button" value="添加樣式" onclick="add()"/> 27 <p id="p2" class="one">JavaScript使網(wǎng)頁(yè)顯示動(dòng)態(tài)效果并實(shí)現(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> |
|
|
