11_控制类.html 910 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 100px;
  11. background-color: red;
  12. }
  13. .box2{
  14. border:3px solid black;
  15. }
  16. .box3{
  17. margin-top: 200px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <!-- <div class="box box2"></div> -->
  23. <div></div>
  24. <script>
  25. var oBox = document.getElementsByTagName("div")[0];
  26. // oBox.setAttribute("class","box");
  27. // 控制标签类名
  28. // oBox.className = "box";
  29. oBox.className = "box box2";
  30. // var str = "box2";
  31. // oBox.classList.remove("box2");
  32. // oBox.classList.add("box2");
  33. // oBox.classList.replace("box2","box3");
  34. </script>
  35. </body>
  36. </html>