javascript - 使用getElementsByClassName操纵样式

我不明白为什么我无法在代码中操纵.special的样式。我敢肯定这很简单，但是没有用。

<h1>I am an h1!</h1>
<p id="first" class="special">Hello</p>
<p class="special">Goodbye</p>
<p>Hi Again</p>
<p id="last">Goodbye Again</p>


var x = document.getElementsByClassName("special");
x.style.color = "blue";

最佳答案

getElementsByClassName返回一个集合，而不仅仅是一个对象。因此，您需要遍历它们并为其应用颜色。以下是带有鼠标事件的示例示例。

window.onload=function(){
	var hiClass = document.getElementsByClassName("special");

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(hiClass, 'red');
    });
    document.getElementById('A').addEventListener('mouseout', function(){
        changeColor(hiClass, 'blue');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(hiClass, 'blue');
    });

    document.getElementById('B').addEventListener('mouseout', function(){
        changeColor(hiClass, 'red');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

.a {
    width:50px;
    height:50px;
    background-color:blue;
    margin-top:15px;
}
.b {
    width:50px;
    height:50px;
    background-color:red;
    margin-top:10px;
}
th {
    padding:20px;
    width:30px;
    height:30px;
    background-color:green;
}

<table>
    <tr>
        <th id="A" >a</th>
        <th id="B" >b</th>
    </tr>
</table>

<h1>I am an h1!</h1>
<p id="first" class="special">Hello</p>
<p class="special">Goodbye</p>
<p>Hi Again</p>
<p id="last">Goodbye Again</p>

关于javascript - 使用getElementsByClassName操纵样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45699821/