<!doctype html> <html> <head> <meta charset="urtf-8"> <title>通過js改變class名字改變樣式</title> <style> .tao { /*初始樣式*/ border-radius:35px; width:100px; height ...
<!doctype html> <html> <head> <meta charset="urtf-8"> <title>通過js改變class名字改變樣式</title> <style> .tao { /*初始樣式*/ border-radius:35px; width:100px; height:100px; border:1px solid #f00; text-align:center; line-height:100px; } .taot{ /*class名字為taot的樣式*/ width:100px; height:100px; border-radius:50px; border:1px solid #008cba; text-align:center; line-height:100px;
} </style> <script> </script> </head>
<body> <div class="tao"> 圓形DIV </div> <input type="button" value="變圓" id="shi" onclick="fn()"> <script> //獲取對象 let tao=document.getElementsByClassName("tao")[0];//通過class獲取名字註意添加後面[0]; function fn(){ tao.className="taot" } </script> </body> </html>
