选中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下拉框项设置元素颜色属于前端实例代码,有关更多实例代码大家可以查看。