Question

我需要知道如何在Tag中添加一个函数，这很重要，因为ID和Classes是不同的，我需要使用相同的Tag名称来应用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>

Answer 1

你可以试试这个

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'; }
    }
};

DEMO.

Answer 2

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

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

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

Answer 3

您可以尝试此操作（包括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>

Working JSFiddle here

如果您想要切换颜色，请将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);
    }
};

Working JSFiddle of that here

在页面加载时，通过标记名称内联添加函数，如onmouseover

3 个答案: