Change font color of nested HTML element with JavaScript
Question
I want to change the font color of a in class speed to red .
( a cannot get an own id or class)
How can I do this with JavaScript?
<!DOCTYPE html>
<html>
<body>
<div class="gun">
<a href="#">Hello World!</a>
</div>
<div class="speed">
<a href="#">Hello World!</a>
</div>
<script>
...
</script>
<div>
</body>
</html>
5 answers
solution1
2 ACCPTED 2018-05-09 15:24:54
Use document.querySelector to select the a tag and change the color using style.color :
document.querySelector('.speed a').style.color = 'red';
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
solution2
1 2018-05-09 15:46:01
The earlier-posted answers using querySelector are correct, assuming you only have the one <a> . That's because it only selects the first element matching the selector.
If you happen to have multiple instances of .speed a in your DOM, you can use document.querySelectorAll instead. That will get you an iterable list of all elements matching the selector; you can then loop through all of them.
var linksToChange = document.querySelectorAll(".speed a") linksToChange.forEach(function(toChange) { toChange.style.color = "red"; });
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World #1!</a> <div id="someDiv"> <a href="#">Hello World #2!</a> </div> </div> <div class="speed"> <a href="#">Hello World #3!</a> </div>
If you would like to only highlight the <a> s which are direct children of a .speed element, you can change the selector string to .speed > a . In the above case, that would make "Hello World #2!" remain the default color because it is nested inside a div .
Also, I'm assuming you want to change the link dynamically rather than just simply making it red from the start. As others have noted, if you want the link to simply be red and stay red, you should style it using CSS instead of JavaScript.
solution3
0 2018-05-09 15:25:23
You can select it with document.querySelecotr() and then change style to whatever you want
document.querySelector(".speed a")
document.querySelector(".speed a").style.color = "red"
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
solution4
0 2018-05-09 15:27:09
Not using a class to apply style is a terrible choice in my humble opinion. You are not specifying what is triggering the style change, so it is assumed you want it as it loads.
document.querySelector('.speed>a').style.color = "red";
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
As JavaScript styles are "hidden" from CSS files and require a code change if needing change, such as changing the color from red to blue, they are a terrible way to maintain styles.
You should be using your existing class instead.
.speed>a{ color: red; }
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
solution5
0 2018-05-09 15:39:13
Select it with document.querySelector('.speed a') and then change style.color to red.
For more info on selectors refer this CSS selectors
document.querySelector('.speed a').style.color = 'red';
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.