 
　　<script type="text/javascript"> 
　　var d = document.getElementById("d"); 
　　function setProperty(){ 
　　var set = document.getElementById("setColor"); 
　　var optionValue = set.options[set.selectedIndex].value; 
　　d.style.backgroundColor = optionValue; 
　　} 
　　function reset(){ 
　　d.style.backgroundColor = "transparent"; 
　　} 
　　</script> 

HTML代碼
本例的HTML代碼比較簡(jiǎn)單，一個(gè)select元素用來羅列出來可選的背景色。而按鈕則負(fù)責(zé)觸發(fā)事件，調(diào)用函數(shù)。

復(fù)制代碼代碼如下:

 
　　<select id="setColor"> 
　　<option value="aqua">aqua</option> 
　　<option value="black">black</option> 
　　<option value="blue">blue</option> 
　　<option value="fuchsia">fuchsia</option> 
　　<option value="gray">gray</option> 
　　<option value="green">green</option> 
　　<option value="lime">lime</option> 
　　<option value="maroon">maroon</option> 
　　<option value="navy">navy</option> 
　　<option value="olive">olive</option> 
　　<option value="purple">purple</option> 
　　<option value="red">red</option> 
　　<option value="silver">silver</option> 
　　<option value="teal">teal</option> 
　　<option value="white">white</option> 
　　<option value="yellow">yellow</option> 
　　</select> 
　　<button onclick="setProperty();return fales;">設(shè)置背景顏色</button> 
　　<button onclick="reset();return fales;">取消</button> 

效果
選擇顏色后點(diǎn)擊按鈕“設(shè)置背景顏色”。

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼
這篇文章主要介紹了JS實(shí)現(xiàn)支持多選的遍歷下拉列表代碼,涉及javascript遍歷select及設(shè)置css屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
JavaScript實(shí)現(xiàn)鐘表案例
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鐘表案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-01-01
簡(jiǎn)單方法判斷JavaScript對(duì)象為null或者屬性為空
對(duì)已聲明但未初始化的和未聲明的變量執(zhí)行typeof，都返回undefined，null表示一個(gè)空對(duì)象指針，typeof操作會(huì)返回object
2014-09-09
javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)頁(yè)面
本文給大家介紹了如何使用javascript實(shí)現(xiàn)倒計(jì)時(shí)跳轉(zhuǎn)到其他頁(yè)面的方法以及實(shí)現(xiàn)原理，非常的簡(jiǎn)單實(shí)用，有需要的小伙伴可以參考下。
2016-01-01
jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
jquery操作拉列表、文本框、復(fù)選框、單選框集合。各種對(duì)下拉列表、文本框、復(fù)選框、單選框的jquery的相關(guān)操作。做為記錄和收藏的最好方法
2014-01-01
JavaScript數(shù)據(jù)類型學(xué)習(xí)筆記
這篇文章主要針對(duì)JavaScript數(shù)據(jù)類型整理的學(xué)習(xí)筆記，分享給大家，感興趣的小伙伴們可以參考一下
2016-01-01
防止文件緩存的js代碼
原理其實(shí)就是通過在固定地址后面，加上一個(gè)不同值的日期數(shù)值，以達(dá)到地址不重復(fù)的目的，讓瀏覽器每次都實(shí)時(shí)加載，不從緩存中讀取文件
2013-01-01
詳談js中數(shù)組(array)和對(duì)象(object)的區(qū)別
下面小編就為大家?guī)硪黄斦刯s中數(shù)組(array)和對(duì)象(object)的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
完美解決AJAX跨域問題
我看到過很多人不愿意去正視ajax所存在的技術(shù)瓶頸，其實(shí)AJAX更應(yīng)該是Ajax而不是AJAX，突出第一個(gè)A是想強(qiáng)調(diào)其實(shí)AJAX發(fā)揚(yáng)的是一種異步傳輸?shù)姆椒ǎ皇蔷唧w到底使用了哪種技術(shù)
2013-11-11
關(guān)于meta viewport中target-densitydpi屬性詳解（推薦）
這篇文章主要介紹了關(guān)于meta viewport中target-densitydpi屬性詳解，通過不同的縮放比例實(shí)現(xiàn)了不同的預(yù)覽效果，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
2017-08-08