10.17 改变slsect选中项的颜色特效.htm

来自「这是一些常用的JavaScript的特效的源码和教程」· HTM 代码 · 共 28 行

HTM
28
字号
<html>
<head>
<title>改变选中项的颜色</title>
</head>
<body >
<script language="javascript">
    function setColor(_parent, _child) {
        for (var i=0; i<_parent.options.length; i++) {//遍历所有选项
             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();   //窗体获得焦点
    }
</script>
<select onchange="setColor(this, options[selectedIndex]);">
    <option style="color:yellow; background-color:blue;">选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    <option>选项4</option>
    <option>选项5</option>
</select>
</body>
</html>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?