選中select下拉框項設定元素顏色

admin發表於2017-10-31

本章節介紹一下如何選中一個下select下拉選單的項設定一個元素景色。

當然也許此應用在實際編碼中並不多見，不過可以起到舉一反三的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>select設定元素的顏色-螞蟻部落</title>
<script type="text/javascript">
window.onload=function(){
  var otext=document.getElementById("text");
  var oselectColor=document.getElementById("selectColor"); 
  oselectColor.onchange=setColor;
  function setColor(){ 
    var optionValue=oselectColor.options[oselectColor.selectedIndex].value; 
    if(optionValue!=1){
      otext.style.color=optionValue;
    }
  }
} 
</script>
</head> 
<body> 
<select id="selectColor"> 
<option value=1>請選擇顏色</option>
<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> 
<div id="text">螞蟻部落歡迎您</div>
</body> 
</html>

當選擇下拉選單的顏色的時候可以實現設定div中字型的顏色，下面簡單介紹一下實現過程:

一.實現原理

select下拉選單中value屬性值就是要設定的元素之，最好用十六進位制表示，這裡只是為了方便而已。選擇下拉項的時候就會觸發onchange事件並執行事件處理函式，通過style的方式設定div中字型的顏色。

二.程式碼註釋:

（1）.window.onload=function(){}，文件內容完全載入完成後執行函式中的程式碼。

（2）.var otext=document.getElementById("text")，獲取id屬性值為text的元素物件。

（3）.var oselectColor=document.getElementById("selectColor")，獲取id屬性值selectColor的元素物件。

（4）.oselectColor.onchange=setColor，為oselectColor註冊事件處理函式。

（5）.function setColor(){}，用於設定文字顏色的函式。

（6）. var optionValue=oselectColor.options[oselectColor.selectedIndex].value，將選中option的value值賦值給optionValue。

（7）.if(optionValue!=1)，如果不是選擇的第一項，就進行顏色設定。

三.相關閱讀:

（1）.onchange事件參閱javascript change事件一章節。

（2）.select下拉操作參閱javascript動態操作select下拉選單一章節。

相關文章