Javascript: как изменить цвет тега <a>при нажатии кнопки - PullRequest
Новая
       1

Javascript: как изменить цвет тега <a>при нажатии кнопки

0 голосов
/ 30 апреля 2020

Когда я запускаю этот код и нажимаю кнопку черная , каждый текст меняет свой цвет на белый, кроме тега <a>.

Я уже выбрал весь тег body с помощью document.querySelector('body'), но ссылка выглядит как blue .

Как можно независимо выбрать тег <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 ]

2 голосов
/ 30 апреля 2020

Вы можете добавить код стиля. 

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

Он получает тот же цвет, что и цвет в его верхнем узле (теле).

Удачи

1 голос
/ 30 апреля 2020

document.getElementsByTagName('a')

И тогда вам нужно будет пройти через них всех oop и установить их стиль.

0 голосов
/ 01 мая 2020

Попробуйте следующий код: посещенный {цвет: оранжевый}

0 голосов
/ 30 апреля 2020

Это происходит из-за того, как наследование работает в CSS. Браузер стилизует тег <a> как синий, и поэтому он не наследует color от своих предков.

Я бы порекомендовал установить класс в элементе <body>, а затем используйте CSS, чтобы оформить его по-разному с / без класса, например: 

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>
0 голосов
/ 30 апреля 2020

Если не указано, c стили применяются к тегу <a>, он будет иметь этот синий цвет по умолчанию, заданный браузером.

Первое, что вы можете сделать, это присвоить тегу идентификатор <a id="link" href="https://google.com">link</a> и измените его свойство цвета на javascript с document.getElementById('link').style.color = 'white'. Таким образом, вы будете изменять теги только с указанным c 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>

Если вы хотите изменить все <a> теги в вашем html, вы можете добавить <style> в ваш <head>, чтобы все <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...