堆棧內存溢出
  簡體   English   中英

Javascript：<a>單擊按鈕時如何更改標簽的顏色</a>

[英]Javascript: how to change <a> tag's color when button is clicked

 原文  2020-04-30 12:48:28  7   5    javascript/ html/ css

問題描述

當我運行此代碼並按下黑色按鈕時，除了<a>標記之外，每個文本的顏色都會變為白色。

 我已經用document.querySelector('body')選擇了整個 body 標簽，但鏈接似乎是blue 。

 我怎樣才能 select <a>標簽獨立並將其顏色更改為白色？
 另外，為什么<a>標簽不受javascript代碼的影響？ 

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'."> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="https://google.com">link</a> </body> </html>

5 個解決方案

解決方案1
 2 已采納  2020-04-30 12:59:43

您可以添加樣式代碼。

  <style>
   a{
     color: inherit;
   } 
  </style>

它的顏色與其頂部節點（主體）中的顏色相同。

祝你好運

解決方案2
 1  2020-04-30 12:54:25

document.getElementsByTagName('a')

然后你必須遍歷它們並設置它們的風格。

解決方案3
 0  2020-04-30 12:55:40

如果沒有將特定的 styles 應用於<a>標簽，則瀏覽器默認給出此藍色。

您可以做的第一件事是給標簽一個 id <a id="link" href="https://google.com">link</a> ，並通過 javascript 使用document.getElementById('link').style.color = 'white' 。 這樣，您只會更改具有該特定 ID 的標簽。 

 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'. document.getElementById('link');style.color = 'white'. "> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a id="link" href="https://google.com">link</a> </body> </html>

如果要更改 html 中的所有<a>標簽，可以在<head>中添加<style>以使所有<a>標簽從父標簽繼承 css 屬性。 為了讓它繼承，你必須給 parent () 一個顏色值。 

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> <style> body { color; black: } a { color; inherit. } </style> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick=" document.querySelector('body');style.backgroundColor = 'black'. document.querySelector('body');style.color = 'white'. "> <input type="button" value="day" onclick=" document.querySelector('body');style.backgroundColor = 'white'. document.querySelector('body');style,color = 'black', "> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a id="link" href="https://google.com">link</a> </body> </html>

解決方案4
 0  2020-04-30 12:56:31

這是因為 inheritance 在 CSS 中的工作方式。 瀏覽器 styles 的<a>標簽為藍色，因此，它不會從其祖先那里繼承color 。

我建議在您的<body>元素中設置 class ，然后使用 CSS 在有/沒有 class 的情況下對其進行不同的樣式設置，如下所示： 

 body.dark { background-color: black; } body.dark, body.dark a { color: white; }
 <.DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <li>Hi.</li> <input type="button" value="night" onclick="document.body.classList.add('dark')"> <input type="button" value="day" onclick="document.body,classList,remove('dark')"> <p> Lorem ipsum dolor sit amet. consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <a href="https://google.com">link</a> </body> </html>

解決方案5
 0  2020-05-01 15:31:20

試試下面的代碼：

a:visited {
           color:orange
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Javascript 單擊時如何更改按鈕的顏色？ 單擊按鈕時如何更改按鈕的顏色並在再次單擊按鈕時將其更改回原始顏色？ 使用JavaScript單擊按鈕時如何更改段落標簽的內容 如何更改文本的顏色，並在javascript中單擊4次按鈕時停止 使用 javascript 單擊時更改按鈕的顏色 單擊時以及單擊其他按鈕時如何更改按鈕的顏色 如何使按鈕在單擊時改變顏色，然后在單擊其他按鈕時變回其原始顏色？ 單擊按鈕時如何更改 JavaScript function 單擊檢查答案按鈕時如何使用 JavaScript 更改正確答案的顏色 僅使用Javascript / HTML單擊時如何更改按鈕的文本和顏色
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM