2_demo.html 965 B

12345678910111213141516171819202122232425262728293031323334353637383940
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. #div1{
  10. width: 200px;
  11. height: 200px;
  12. background: #000;
  13. left: 100px;
  14. top: 400px;
  15. position: absolute;
  16. }
  17. </style>
  18. <script>
  19. /* 等页面所有的东西都加载完毕 再去执行里面的内容 */
  20. /* window.onload = function(){
  21. var div1 = document.getElementById('div1')
  22. console.log(div1)
  23. } */
  24. </script>
  25. </head>
  26. <body>
  27. <button id="btn">点击我 我就动</button>
  28. <div id="div1"></div>
  29. <script>
  30. var div1 = document.getElementById('div1')
  31. var btn = document.getElementById('btn')
  32. btn.onclick = function(){
  33. div1.style.background = 'yellow'
  34. div1.style.left = '400px'
  35. div1.style.top = '100px'
  36. }
  37. </script>
  38. </body>
  39. </html>