點選按鈕實現切換頁面背景顏色效果

antzone發表於2017-03-18

本章節介紹一下如何實現點選按鈕實現切換網頁背景顏色效果，當然在實際應用中很少有這麼簡單，這裡只是介紹一下對一個簡單問題的實現過程，可能回去其他功能的實現帶來啟示作用。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
#blue{
  background-color:blue;
}
#green{
  background-color:green;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("input").click(function(){ 
    var color=this.value; 
    $("body").css("background-color",color); 
  }) 
})
</script>  
</head> 
<body> 
<input type="button" id="blue" value="blue"/>
<input type="button" id="green" value="green"/>
</body>
</html>

上面的程式碼實現了我們的要求，點選按鈕可以設定不同的背景顏色。

一.程式碼註釋:

1.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

2.$("input").click(function(){})，為按鈕註冊click事件處理函式。

3.var color=this.value，將當前點選的按鈕的value屬性值賦值給color變數，value值是顏色值。

4.$("body").css("background-color",color)，設定頁面的背景顏色。

二.相關閱讀:

1.click事件可以參閱jQuery click 事件一章節。

2.css()函式可以參閱jQuery css()一章節。

相關文章