javascript - 如何让选择器选择 div 类并使用 p 标签名称?

标签 javascript html

你好,我现在有点陷入困境。我试图让我的脚本选择 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() 返回一个集合(请参阅 What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? ),您必须对其进行索引才能在它返回的元素上使用 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 - 如何让选择器选择 div 类并使用 p 标签名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43106266/

相关文章:

Android Html.fromHtml 函数自动将不需要的文本转换为超链接

javascript - Jquery 下拉菜单在远处显示的幻灯片上

javascript - 使用uzz.js 播放一个又一个声音

javascript - 如何在点击 PrintScreen 按钮时白屏/黑屏?

php - 表单 Action 问题

javascript - 如何使用 Javascript/Jquery 为每个唯一属性值选择第一个匹配元素?

javascript - Css/JS 在碰撞时隐藏元素

html - 不同浏览器中的图像颜色差异。 (火狐、 Chrome 、IE)

javascript - IE8 及以下 &lt;input type ="image"> value work around

javascript - 查找 id 的正则表达式