3-2 折翼的天使
本节编程练习不计算学习进度,请电脑登录imooc.com操作

折翼的天使

折翼的天使

任务

老师视频里的不同布局写法,不是习题!!不是习题!!!

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>折翼的天使</title>
  6. <style>
  7. input[type=button] {
  8. height: 32px;
  9. font-size: 100%;
  10. }
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <img src="http://img1.sycdn.imooc.com//54447b06000171a002560191.jpg">
  16. <img src="http://img1.sycdn.imooc.com//54447f4a0001eb7d01910256.jpg">
  17. <img src="http://img1.sycdn.imooc.com//54447f550001ccb002560191.jpg">
  18. <p><input type="button" id="button" value="点击第2张图片应用position:absolute变天使"></p>
  19. <script>
  20. var button = document.getElementById("button"),
  21. image2 = document.getElementsByTagName("img")[1];
  22. if (button && image2) {
  23. var value_init = button.value;
  24. button.onclick = function() {
  25. if (this.value == value_init) {
  26. image2.style.position = "absolute";
  27. this.value = "撤销";
  28. } else {
  29. image2.style.position = "";
  30. this.value = value_init;
  31. }
  32. };
  33. }
  34. </script>
  35. </body>
  36. </html>
下一节