如何使选择器选择div类和标签名称为p



你好,我现在有点卡住了。我试图让我的脚本选择更改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;
 }

最新更新