使用JavaScript更改嵌套HTML元素的字體顏色
[英]Change font color of nested HTML element with JavaScript
問題描述
我想要的字體顏色改變a類speed以red 。
（ a不能得到自己的ID或類）
如何使用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 個解決方案
解決方案1
2 已采納 2018-05-09 15:24:54
使用document.querySelector選擇a標簽並使用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>
解決方案2
1 2018-05-09 15:46:01
假設您只有一個<a> ，那么使用querySelector發布的較早答案是正確的。 那是因為它僅選擇與選擇器匹配的第一個元素。
如果您的DOM中碰巧有多個.speed a實例， .speed a可以改用document.querySelectorAll 。 這將為您提供一個與選擇器匹配的所有元素的可迭代列表； 然后您可以遍歷所有這些對象。
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>
如果只想突出顯示.speed元素的直接子元素<a> ，則可以將選擇器字符串更改為.speed > a 。 在上述情況下，這將成為“ Hello World＃2！”。 保留默認顏色，因為它嵌套在div 。
另外，我假設您要動態更改鏈接，而不只是簡單地從一開始就將其更改為紅色。 正如其他人指出的那樣，如果您希望鏈接簡單地為紅色並保持紅色，則應使用CSS而不是JavaScript設置樣式。
解決方案3
0 2018-05-09 15:25:23
您可以使用document.querySelecotr()進行選擇，然后將樣式更改為所需的樣式
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>
解決方案4
0 2018-05-09 15:27:09
在我的拙見中，不使用課程來應用樣式是一個糟糕的選擇。 您沒有指定觸發樣式更改的內容，因此假定您希望在加載樣式時進行更改。
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>
由於JavaScript樣式是從CSS文件中“隱藏”的，並且需要更改代碼（例如，將顏色從紅色更改為藍色）時，需要更改代碼，因此這是一種糟糕的樣式維護方式。
您應該改用現有的類。
.speed>a{ color: red; }
<div class="gun"> <a href="#">Hello World!</a> </div> <div class="speed"> <a href="#">Hello World!</a> </div>
解決方案5
0 2018-05-09 15:39:13
使用document.querySelector('.speed a') ，然后將style.color更改為紅色。
有關選擇器的更多信息，請參見此CSS選擇器
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>
JavaScript / HTML-在8個小數位后更改字體大小/顏色
[英]JavaScript/Html - Change Font Size/Color After 8 Decimal Places
如何使用顏色類型的輸入元素與 javascript 更改出現在可編輯 iframe 中的字體顏色
[英]How to use the input element of type color with javascript to change the font color appearing in an editable iframe
如何更改HTML文檔上Javascript元素的文本顏色
[英]How to change the Text color of a Javascript element on a HTML document
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.