利用JS代碼改變select選中項(xiàng)的顏色特效

2012/11/1 20:09:56作者：佚名來源：網(wǎng)絡(luò)

移動端

【實(shí)例名稱】

【實(shí)例描述】

默認(rèn)的select選中項(xiàng)的顏色是黑底白字。有時為了實(shí)現(xiàn)與頁面布局的統(tǒng)一，需要改變select選中項(xiàng)的顏色，本例介紹如何實(shí)現(xiàn)這個特效。

【實(shí)例代碼】

<html>
<head>
<title>改變選中項(xiàng)的顏色-學(xué)無憂（www.wangbatian.cn）</title>
</head>
<body >
<script language="javascript">
    function setColor(_parent, _child) {
        for (var i=0; i<_parent.options.length; i++) {
//遍歷所有選項(xiàng)
             if (_parent.options[i] == _child) {
                 _parent.options[i].style.color = 'yellow';                 
//顏色
                 _parent.options[i].style.backgroundColor = 'blue';         
//背景色
             } else {
                 _parent.options[i].style.color = '';                       
//取消顏色
                 _parent.options[i].style.backgroundColor = '';             
//取消背景色
             }
        }
        document.body.focus();   //窗體獲得焦點(diǎn)
    }
</script>
<select onchange="setColor(this, options[selectedIndex]);">
    <option style="color:yellow; 
background-color:blue;">選項(xiàng)1</option>
    <option>選項(xiàng)2</option>
    <option>選項(xiàng)3</option>
    <option>選項(xiàng)4</option>
    <option>選項(xiàng)5</option>
</select>
</body>
</html>

【運(yùn)行效果】

改變select選中項(xiàng)的顏色特效運(yùn)行效果