5-2 float浮动去空格
本节编程练习不计算学习进度,请电脑登录imooc.com操作

float浮动去空格

浮动去空格

任务

点击按钮浮动

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>浮动去空格</title>
  6. <style>
  7. button { margin: 0; }
  8. p { clear: both; }
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <button>按钮1</button>
  14. <button>按钮2</button>
  15. <button>按钮3</button>
  16. <button>按钮4</button>
  17. <p><input type="button" id="trigger" value="点击按钮浮动"></p>
  18. <script>
  19. var trigger = document.getElementById("trigger"),
  20. buttons = document.getElementsByTagName("button");
  21.  
  22. var length = buttons.length;
  23.  
  24. if (trigger && length > 0) {
  25. trigger.onclick = function() {
  26. for (var index = 0; index < length; index += 1) {
  27. buttons[index].style["cssFloat" in trigger.style? "cssFloat": "styleFloat"] = "left";
  28. }
  29. };
  30. }
  31. </script>
  32. </body>
  33. </html>
下一节