CODEWITHSUNDEEP
javascripthtmlcss
AlbertKang1004
AlbertKang1004

Reputation: 43

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

When I run this code and press black button, every text changes their color to white, except <a> tag.

I already selected entire body tag with document.querySelector('body'), but the link appears to be blue.

How can I select <a> tag independently and change its color to white?
Also, why <a> tag does not get effected by javascript code?

<!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>

Upvotes: 0

Views: 407

Answers (5)

Amarnath Vishwakarma
Amarnath Vishwakarma

Reputation: 39

Try the following code:

a:visited {
           color:orange
}

Upvotes: 0

David Mitjana
David Mitjana

Reputation: 19

If not specific styles are applied to an <a> tag, it will have this blue color by deafult given by the browser.

The first thing you can do is give the tag an id <a id="link" href="https://google.com">link</a>, and change its color property through javascript with document.getElementById('link').style.color = 'white'. That way you'll only change the tags with that specific 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>

If you want to change all <a> tags in your html, you can add <style> in your <head>to make all <a> tags inherit css properties from the parent. So that it inherits, you'll have to give the parent () a color value.

<!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>

Upvotes: 0

resobyte
resobyte

Reputation: 126

You can add style code.

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

It gets the same color as the color in its top node (body).

Good Luck

Upvotes: 2

D. Pardal
D. Pardal

Reputation: 6597

That happens because of how inheritance works in CSS. The browser styles the <a> tag as blue, and because of that, it doesn't inherit color from its ancestors.

I would recommend to set a class in your <body> element, and then use CSS to style it differently with/without the class, like this:

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>

Upvotes: 0

Lekoaf
Lekoaf

Reputation: 1049

document.getElementsByTagName('a')

And then you'd have to loop through them all and set their style.

Upvotes: 1

Related Questions