javascript - 使用 getElementsByClassName 操作样式

Question

我不明白为什么我不能在我的代码中操作 .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";

Answer 1

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>