选中select下拉框项设置元素颜色

快乐打工仔 分类:实例代码

本章节介绍一下如何选中一个下select下拉菜单的项设置一个元素景色。

当然也许此应用在实际编码中并不多见,不过可以起到举一反三的效果。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.pipipi.net/" />
<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下拉列表一章节。

选中select下拉框项设置元素颜色,这样的场景在实际项目中还是用的比较多的,关于选中select下拉框项设置元素颜色就介绍到这了。

选中select下拉框项设置元素颜色属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容