通過單擊按鈕更改字體顏色（JS 功能）
[英]Change font-color by clicking a button (JS function)
問題描述
我正在嘗試通過單擊按鈕將“div”區域的字體顏色更改為黑色，但我嘗試的所有變體都不起作用。 有沒有人有任何想法？ 這可能與語法有關嗎？
我想這可能是因為我指定了 div 並且函數沒有到達里面的元素。 另一方面，可能是因為我使用document.getElementById("black").style.color="black"; 並且字體沒有直接在那里解決。 這些只是我的一些猜測。
function black() { document.getElementById("black").style.color = "black"; }
<h1 class="eins">Farben</h1> <p class="blau">1. blau</p> <p class="pink">2. pink</p> <h1 class="zwei">Sonnenfarben</h1> <div id="black"> <ul> <li class="rot">rot</li> <li class="orange">orange</li> <li class="gelb">gelb</li> </ul> </div> <p class="braun">3. braun</p> <p class="grau">4. grau</p> <h1 class="drei">Grüntöne</h1> <p class="teal">I. teal</p> <p class="limegreen">II.limegreen</p> <p class="green">III. green</p> <button onclick="black()">Black</button>
這是一個代碼筆： https ://codepen.io/koeddi/pen/WNzopZm
3 個解決方案
解決方案1
1 2022-07-14 14:46:55
- 這是主要邏輯，
document.querySelectorAll("*")這將選擇DOM的所有元素，而我只是使用forEach循環遍歷它。 - 我在此處進行了更改
document.querySelectorAll("#black *")選擇 id#black的所有子項並循環遍歷它，然后使用element.style.color="black"將顏色設置為黑色。
function black() { alert("This will only set all children of #black color to black"); document.querySelectorAll("#black *").forEach(element => { element.style.color = "black"; }) } function setAllToblack() { alert("This will set all elements color to black"); document.querySelectorAll("*").forEach(element => { element.style.color = "black"; }) }
.eins { text-indent: 40px; } .zwei { text-indent: 75px; } .blau { text-indent: 20px; color: blue; } .pink { text-indent: 20px; color: pink; } .rot { text-indent: 70px; color: red; } .orange { text-indent: 70px; color: orange; } .gelb { text-indent: 70px; color: yellow; } .braun { text-indent: 20px; color: brown; } .grau { text-indent: 20px; color: grey; } .teal { text-indent: 20px; color: teal; } .limegreen { text-indent: 20px; color: limegreen; } .green { text-indent: 20px; color: green; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="myjs.js"></script> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1 class="eins">Farben</h1> <p class="blau">1. blau</p> <p class="pink">2. pink</p> <h1 class="zwei">Sonnenfarben</h1> <div id="black"> <ul> <li class="rot">rot</li> <li class="orange">orange</li> <li class="gelb">gelb</li> </ul> </div> <p class="braun">3. braun</p> <p class="grau">4. grau</p> <h1 class="drei">Grüntöne</h1> <p class="teal">I. teal</p> <p class="limegreen">II.limegreen</p> <p class="green">III. green</p> <button onclick="black()">Black</button> <button onclick="setAllToblack()">Set all elements color to Black</button> </body> </html>
解決方案2
1 2022-07-14 14:50:01
你的document.getElementById("black").style.color="black"; 可能已正確設置為黑色，但它沒有任何未包含在其中的其他標簽中的文本元素。
你只有在不同標簽中的文本元素，這些標簽有自己的顏色，那些選擇器（更具體的）更重要，所以顏色不會改變。
解決方案3
0 2022-07-14 15:29:22
您的代碼可以正常工作，它可以更改 Div 內容顏色，但在 div 內部，您有 li 有不同的樣式，因此它們的顏色沒有改變，但是如果您也想更改它們的顏色，那么您需要獲取所有 li 及其 id 或 class 和改變他們的顏色，或者你也可以用你的父母ID來做這個，比如 parent.children(i).style="color" 在循環中改變他們的顏色。
JS & CSS: 同句行單個詞的字體顏色和粗細
[英]JS & CSS: Font-color and thickness of a single word in the same sentence line
Chrome擴展程序開發：通過單擊popup.html中的顏色按鈕來更改字體顏色
[英]Chrome extension development: change font color by clicking color button in popup.html
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.