| <!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> |
改變背景和字體顏色
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
JavaScript 音頻插件和圖表插件
howler音頻插件 配置項及事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <s
JavaScript中的window對象
window對象：每一個該對象代表一個瀏覽器窗口 1.常用方法如下 open("要打開的頁面文件名","打開窗口在操作系統中的名稱(任何名稱都可以)", "toolbar=?,menubar=?,