jquery修改網(wǎng)頁背景顏色通過css方法實現(xiàn)
更新時間：2014年06月06日 10:19:25 作者：
在瀏覽一些網(wǎng)站，尤其是一些小說網(wǎng)站的時候，都會有修改頁面背景顏色的地方，這個是用jquery可以做到
我們在瀏覽一些網(wǎng)站，尤其是一些小說網(wǎng)站的時候，都會有修改頁面背景顏色的地方，這個功能使用jquery很容易實現(xiàn)。
效果圖：
show you code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<button style="background-color:white" value="white">white</button>
<button style="background-color:red" value="red">red</button>
<button style="background-color:green" value="green">green</button>
<button style="background-color:yellow" value="yellow">yellow</button>
<div class="show">
</div>
<script>
$("button").click(
function()
{
var color = this.value;
$("body").css("background-color",color);
}
)
</script>
</html>
我們先根據(jù)元素名選擇我們要操作的對象：button，然后使用click方法找到被點擊的按鈕，然后在觸發(fā)的事件中獲取該按鈕的對應(yīng)的顏色值，然后通過css（）方法將該顏色值作為background-color的屬性值傳入。
效果圖：
show you code:
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery test</title>
<script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<button style="background-color:white" value="white">white</button>
<button style="background-color:red" value="red">red</button>
<button style="background-color:green" value="green">green</button>
<button style="background-color:yellow" value="yellow">yellow</button>
<div class="show">
</div>
<script>
$("button").click(
function()
{
var color = this.value;
$("body").css("background-color",color);
}
)
</script>
</html>
我們先根據(jù)元素名選擇我們要操作的對象：button，然后使用click方法找到被點擊的按鈕，然后在觸發(fā)的事件中獲取該按鈕的對應(yīng)的顏色值，然后通過css（）方法將該顏色值作為background-color的屬性值傳入。
相關(guān)文章
基于jQuery的JavaScript模版引擎JsRender使用指南
這篇文章主要介紹了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以參考下2014-12-12
屬性的類型可以為：圖片、文本框、按鈕，然后選擇需要設(shè)置的屬性值：src、width、height、title、value等等，具體實現(xiàn)如下，感興趣的朋友可以參考下哈2013-05-05
本文主要對表格的簡單應(yīng)用：表格變色;表格展開關(guān)閉;表格內(nèi)容篩選進行實例分析介紹。具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案
jquery ajax 同步異步的執(zhí)行 return值不能取得的解決方案，需要的朋友可以參考下。2012-01-01
jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式
這篇文章主要介紹了jQuery插件Validate實現(xiàn)自定義校驗結(jié)果樣式的方法，感興趣的小伙伴們可以參考一下2016-01-01
尋尋覓覓，覓覓尋尋終于找到了一些關(guān)于jquery性能優(yōu)化的文章，果斷收藏當(dāng)然不能忘了加上自己的一些總結(jié)及理解。2014-05-05
deferred對象是jQuery對Promises接口的實現(xiàn)。接下來通過本文給大家詳解介紹jQuery中的deferred對象的使用（一），需要的朋友一起學(xué)習(xí)吧2016-05-05
jquery ajax傳遞中文參數(shù)亂碼問題及解決方法說明
本篇文章主要是對jquery ajax傳遞中文參數(shù)亂碼問題及解決方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
關(guān)于setInterval、setTimeout在jQuery中的使用注意事項
最近碰到個問題，在使用jquery寫定時器時，總是會出現(xiàn)fn不存在的錯誤提示2011-09-09
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)輪播特效的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-04