1. 程式人生 > >JavaScript之className

JavaScript之className

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