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

你好，我现在有点卡住了。我试图让我的脚本选择div类中的所有段落，但我并不真正了解如何去做。在HTML看起来像这样在身体如何让选择器选择div类和标签名称为p？

<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"; 
    } 
}

来源

2017-03-30 Kevin

您是否尝试过的onblur？并使用选择器... – TGarrett

你的意思是，你想改变悬停的字体颜色？或点击？ – JkAlombro

只是在悬停，但我希望它只能悬停在div类更改只有所以只有div顶部/底部，而不是中间 – Kevin

有没有功能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。

来源

2017-03-30 00:12:22 Barmar

你可以达到你想要的东西没有了JavaScript，只是这个代码添加到你的CSS

.change p:hover { 
    color: red; 
}

来源

2017-03-30 00:16:48 JkAlombro

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

回答

相关问题