2.小例子.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  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: 200px;
  10. height: 200px;
  11. background-color: aqua;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <div class="btn">这是一个按钮</div>
  17. <div id="box"></div>
  18. <hr>
  19. <div id="list">
  20. <div class="a">今天</div>
  21. <div class="b">明天</div>
  22. <div class="c">后天</div>
  23. </div>
  24. <button>改变</button>
  25. <script>
  26. var btn = document.querySelector(".btn");
  27. // var btn = document.getElementById("btn");
  28. console.log(btn,'btn')
  29. var box = document.getElementById("box");
  30. btn.onclick = function(){
  31. console.log("点击");
  32. box.style.background = 'red';
  33. }
  34. var btn1 = document.querySelector("button");
  35. var a = document.querySelector(".a");
  36. var b = document.querySelector(".b");
  37. var c = document.querySelector(".c");
  38. btn1.onclick = function() {
  39. a.style.fontSize = '30px';
  40. a.style.color = 'red';
  41. b.style.fontWeight = '600';
  42. b.style.color = 'green';
  43. c.style.display = 'none';
  44. }
  45. </script>
  46. </body>
  47. </html>