js学习笔记（四）
選項卡
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡</title> <style>#div1{width: 200px;height: 200px;background: red;} </style> <script>function toGreen(){var oDiv = document.getElementById('div1');oDiv.style.background = 'green';}function toYellow(){var oDiv = document.getElementById('div1');oDiv.style.background = 'yellow';}function toBlack(){var oDiv = document.getElementById('div1');oDiv.style.background = 'black';} </script> </head> <body> <input type="button" value="變綠" οnclick="toGreen()" /> <input type="button" value="變黃" οnclick="toYellow()" /> <input type="button" value="變黑" οnclick="toBlack()" /> <div id="div1"></div> </body> </html> ------------------------------------------------------------------------ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>選項卡的優化之合并函數</title> <style>#div1{width: 200px;height: 200px;background: red;} </style> <script>function setcolor(color){var oDiv = document.getElementById('div1');oDiv.style.background = color;} </script> </head> <body> <input type="button" value="變綠" οnclick="setcolor('green');" /> <input type="button" value="變黃" οnclick="setcolor('yellow');" /> <input type="button" value="變黑" οnclick="setcolor('black');" /> <div id="div1"></div> </body> </html>總結
- 上一篇： js初学笔记（三）
- 下一篇： 阿里6年，我的技术蜕变之路！