通过javascript修改class名字-学习笔记
<!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>
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄
} </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>
更多精彩
