4

我需要知道如何在标签中添加函数，这很重要，因为 ID 和类不同，我需要应用具有相同标签名称的 JavaScript 方法。到目前为止，这就是我想出的，并试图让它发挥作用。

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<select>
    <option>1</option>
</select>
<br/>
<select>
    <option>1</option>
</select>

<script>
function myFunction()
{
    var elem = document.getElementsByTagName("SELECT");
    for (var i = 0;i < elem.length; i++)
    {
        elem[i].onmouseover = "this.style.background='red'";
    }
}
</script>

</body>
</html>
4

3 回答 3

2

你可以试试这个

window.onload=function(){
    var elem = document.getElementsByTagName("SELECT");
    for (var i = 0;i < elem.length; i++)
    {
        elem[i].onmouseover = function(){ this.style.background='red'; }
        elem[i].onmouseout = function(){ this.style.background='white'; }
    }
};

演示。

于 2013-04-23T02:17:02.700 回答
2

事件处理程序是函数，因此：

elem[i].onmouseover = function() {
    this.style.background='red';
}

当您直接在 HTML 中添加事件处理程序时，例如 in <div onmouseover="this.style.background='red'"></div>，该包装函数是隐式的。从 JavaScript 附加处理程序时，它是强制性的，它的主体应该是常规代码，而不是字符串。

于 2013-04-23T02:17:31.467 回答
1

你可以试试这个（包括你的 HTML 中的一些修复）：

<!DOCTYPE html>
<html><head><title>Demo</title>
<script type='text/javascript'>//<![CDATA[ 
function highlight(){
    this.style.background='red';
}

window.onload=function(){
    var col = document.getElementsByTagName('select'), L=col.length;
    while(L--){ col[L].addEventListener("mouseover", highlight, false); }
};
//]]>  
</script>
</head><body>

<select>
    <option>1</option>
</select>
<br/>
<select>
    <option>1</option>
</select>

</body></html>

在这里工作 JSFiddle。

如果您希望切换颜色，请将 javascript 替换为以下内容：

function highlight(){
    var ts=this.style;
    ts.backgroundColor = ts.backgroundColor === 'red' ? '' : 'red';
}

window.onload=function(){
    var col = document.getElementsByTagName('select'), L=col.length;
    while(L--){ 
        col[L].addEventListener("mouseover", highlight, false); 
        col[L].addEventListener("mouseout", highlight, false);
    }
};

在这里工作的 JSFiddle

于 2013-04-23T02:23:16.647 回答