你好,我现在有点卡住了。我试图让我的脚本选择更改div 类中的所有段落,但我真的不知道该怎么做。html在正文中看起来像这样
<body>
<div id="top" class="change">
<p> Microsoft </p>
<p> Apple </p>
<p> Sony </p>
</div>
<div id="middle">
<p> Disney </p>
<p> Nintendo </p>
<p> Sony </p>
</div>
<div id="bottom" class="change">
<p> Ice</p>
<p> Tea</p>
<p> Water</p>
</div>
</body>
我正在尝试使它,当鼠标光标触摸段落中具有更改类的任何内容时,它会将颜色更改为我选择的颜色,但我不知道如何使用纯 javascript 的选择器来做到这一点。这是我拥有的当前代码,但它不起作用。我只能使用javascript
var fontChange = document.getElementsByClass("change").getElementsByTagName("p");
for (let i = 0; i < changeFont.length; i++) {
changeFont[i].onmouseover=function() {
this.style.color = "red";
}
}
for (let i = 0; i < changeFont.length; i++) {
changeFont[i].onmouseout=function() {
this.style.color = "black";
}
}
没有函数getElementsByClass
,它是getElementsByClassName
。
document.getElementsByClassName()
返回一个集合(请参阅 querySelectorAll、getElementsByClassName 和其他 getElementsBy* 方法返回什么?(,您必须为它编制索引以在它返回的元素上使用getElementsByTagName
。
var fontChange = [];
var change = document.getElementsByClassName("change");
for (var i = 0; i < change.length; i++) {
var paras = [].slice.call(change[i].getElementsByTagName("p"));
fontChange.concat(paras);
}
或者你可以只使用querySelectorAll
var fontChange = document.querySelectorAll(".change p");
你还有一个错别字。您将变量设置为 fontChange
,但随后在循环中使用 changeFont
。
你可以在没有javascript的情况下实现你想要的,只需将此代码添加到你的css中即可
.change p:hover {
color: red;
}