JavaScript之className
阿新 • • 發佈：2019-01-04
ava 圖片 rip yellow 100% ron 代碼示例 UNC 代碼
這個知識點比較簡單,className就是JavaScript的方式給相應元素區添加class選擇器樣式
代碼示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>className</title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; border: 2px solid yellow; float: left; margin-left: 100px; font: 30px/100px "simhei"; color: #fff; transition: 0.3s; } .a{ border: 8px solid #26FF08; background: #2E00EF; color: #ccc; border-radius: 50%; }.b{ border: 4px solid #26FF08; background: #7B8113; color: #220077; border-radius: 50%; } .c{ border: 4px solid #26FF08; background: url("img1.jpg"); background-size: 100% 100%; color: #220077; border-radius: 50%; }</style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </body> </html> <script type="text/javascript"> //通過id獲取相應div元素區 var div1=document.getElementById(‘box1‘); var div2=document.getElementById(‘box2‘); var div3=document.getElementById(‘box3‘); // 點擊相應div元素區,為相應div元素區增加相應樣式 div1.onclick=function(){ div1.className=‘a‘; }; div2.onclick=function(){ div2.className=‘b‘; }; div3.onclick=function(){ div3.className=‘c‘; }; </script>
初始效果:
根據上面代碼可知點擊第一個div元素區獲得a樣式:
根據上面代碼可知點擊第二個div元素區獲得b樣式:
根據上面代碼可知點擊第三個div元素區獲得c樣式:
小可愛們,看懂了嘛,喜歡的小可愛雙擊哦!
JavaScript之className