改變背景和字型顏色
阿新 • • 發佈：2018-12-20
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>第二題</title> |
| </head> |
| <style type="text/css"> |
| #d1{width: 100px;height: 100px;margin-top: 20px; background:red;text-align: center; |
| line-height: 100px;color: black;} |
| #p1{display: block;} |
| </style> |
| <body> |
| <input type="button" id="b1" value="修改背景顏色"> |
| <input type="button" id="b3" value="顯示隱藏文字"> |
| <input type="button" id="b2" value="改變文字顏色"> |
| <div id="d1"> <p id="p1">生而無畏</p></div> |
| </body> |
| </html> |
| <script type="text/javascript"> |
| // 獲取標籤物件 |
| var oButton1=document.getElementById('b1'); |
| var oButton2=document.getElementById('b2'); |
| var oButton3=document.getElementById('b3'); |
| var oDiv = document.getElementById（'d1'）; |
| var op = document.getElementById（'p1'）; |
| //改變div背景顏色 |
| oButton1.onclick =函式（）{ |
| if（oDiv.style.background =='yellow'）{ |
| oDiv.style.background = '紅'; |
| }其他{ |
| oDiv.style.background = '黃色'; |
| }; |
| }; |
| //改變文字顏色 |
| oButton2.onclick =函式（）{ |
| if（oDiv.style.color =='white'）{ |
| oDiv.style.color = '黑'; |
| }其他{ |
| oDiv.style.color = '白色'; |
| }; |
| }; |
| //顯示隱藏文字 |
| oButton3.onclick =函式（）{ |
| if（op.style.display ==“none”）{ |
| op.style.display = '塊'; |
| }其他{ |
| op.style.display = '無'; |
| }; |
| }; |
| </ SCRIPT> |