Javascript獲取標簽ID改變style屬性的代碼
更新時間：2012年08月24日 17:24:30 作者：
下面的這段代碼中，我們通過select元素的name屬性來設置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設置不同的CSS屬性了
實例JavaScript代碼
下面的這段代碼中，我們通過select元素的name屬性來設置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設置不同的CSS屬性了。
<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代碼比較簡單，一個select元素用來羅列出來可選的背景色。而按鈕則負責觸發(fā)事件，調用函數(shù)。
<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;">設置背景顏色</button>
<button onclick="reset();return fales;">取消</button>
效果
選擇顏色后點擊按鈕“設置背景顏色”。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面的這段代碼中，我們通過select元素的name屬性來設置具體要訪問style的哪個屬性（本例中為背景色），這樣，這個函數(shù)就可以用來設置不同的CSS屬性了。
復制代碼 代碼如下:
<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代碼比較簡單，一個select元素用來羅列出來可選的背景色。而按鈕則負責觸發(fā)事件，調用函數(shù)。
復制代碼 代碼如下:
<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;">設置背景顏色</button>
<button onclick="reset();return fales;">取消</button>
效果
選擇顏色后點擊按鈕“設置背景顏色”。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關文章
表格頭固定而列可滾動的效果...2007-11-11
這篇文章主要介紹了一次記住JavaScript的6個正則表達式方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-02-02
這篇文章主要介紹了微信小程序云開發(fā)之云函數(shù)的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
JavaScript數(shù)組every方法的應用場景實例
every方法確定數(shù)組中的每一項的結果都滿足所寫的條件的時候,就會返回true,否則返回false,這篇文章主要給大家介紹了關于JavaScript數(shù)組every方法應用場景的相關資料,需要的朋友可以參考下2022-12-12
除Console.log()外更多的Javascript調試命令
本篇文章給大家介紹了除Console.log()外更多的Javascript調試命令，方便大家更多環(huán)境下的JS調試，學習下吧。2018-01-01
文件上傳,可以說是我們在項目中最常用的功能之一,文件上傳一般有兩種形式：點擊上傳和拖拽上傳,而上傳的內容,又大體包括：文件和文件夾,本文給大家介紹了JavaScript實現(xiàn)文件的拖拽上傳功能的方法,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了微信小程序組件傳值圖示過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
我在寫這篇文章之前花了2個多小時在弄正則表達式，下為大家介紹下具體的實現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
HTML5中的大部分動畫都是通過Canvas實現(xiàn),因為Canvas就像一塊畫布,我們可以通過調用腳本在Canvas上繪制任意形狀,甚至是制作動畫,這篇文章主要給大家介紹了關于用幾十行js實現(xiàn)很炫的canvas交互特效的相關資料,需要的朋友可以參考下2021-11-11
原生js實現(xiàn)仿window10系統(tǒng)日歷效果的實例
下面小編就為大家?guī)硪黄鷍s實現(xiàn)仿window10系統(tǒng)日歷效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10