0

Интересует вопрос, как можно при помощи JS узнать цвет элемента и заменить его на background-color: blue

HTML

<header class="header">
    <nav class="header__nav">
        <a href="#">
            <div class="header__element">
                about us
            </div>
        </a>
        <a href="#">
            <div class="header__element">
                how it work
            </div>
        </a>
        <a href="#">
            <div class="header__element">
                select your skills
            </div>
        </a>
        <a href="#">
            <div class="header__element">
                contact
            </div>
        </a>
    </nav>
    <div class="header__authorization">
        <div class="header__signIn">
            sign in
        </div>
        <div class="header__signUp" onmouseover="hover()" onmouseout="hover_out()">
            sign up
        </div>
    </div>

</header>

CSS

.header {
    display: flex; 
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 10vh;
    background-color: #fff; }


    .header__element {
        padding: 0 20px;
        margin: 10px;
        border-right: 2px solid #ffce41;
        color: #ffce41; }

        .header__element:hover {
            color: #ffce41; }

    .header__nav, .header__authorization {
        display: flex;
        flex-direction: row;
        text-transform: uppercase; }

    .header__signUp, .header__signIn; {
        border: 1px solid #ffce41;
        padding: 7px 10px;
        border-collapse: collapse; }

    .header__signIn {
        border-radius: 5px  0px 0px 5px;
        background-color: #ffce41; }

        .header__signIn:hover {
            background-color: #fff; }

        .header__signIn:hover ~ .header__signUp {       
            background-color: #ffce41; }

    .header__signUp {
        border-radius: 0px  5px 5px 0px; }

        .header__signUp:hover {
            background-color: #ffce41; }
5
  • Посмотрите learn.javascript.ru/styles-and-classes 6 ноя 2018 в 13:32
  • Cпасибо, но я пробовал использовать метод getComputedStyle и почему-то браузер постоянно выбивал ошибку, так что с ним у меня ничего не получилось ( 6 ноя 2018 в 13:41
  • @AntonKylbashnyi что за ошибку выдавал браузер? Возможно Вы не учли, что getComputedStyle: во-первых - только для чтения, во-вторых - выдаёт значения в своём формате (например, значение цвета в Chrome возвращает в формате rgba(), независимо от того, как Вы задали ему первоначальное значение #rrggbb или yellow). Также с размерами - всё в итоге приводится к пикселям.
    – UModeL
    6 ноя 2018 в 14:04
  • Ошибка: Failed to execute 'getComputedStyle' оn 'Window' : parameter 1 is not of type 'Element'. Даже попробовал посмотреть как отрабатывает пример с js.learn - все равно эта же ошибка. Да и то что данный метод служит исключительно для чтения, говорит о том что он врядли может помочь мне с моей задачей 6 ноя 2018 в 14:18
  • Он 100% может вам помочь) 6 ноя 2018 в 15:15

1 ответ 1

0

Для получения текущих значений стилей можно использовать getComputedStyle.

Посмотрите пример.

function getColor(element) {
  return getComputedStyle(element).backgroundColor;
}

let el = document.querySelector('.header__signIn');
let color = getColor(el);

console.log(color);

if (color === 'rgb(255, 206, 65)') {
  el.style.backgroundColor = 'green';
}
.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 10vh;
  background-color: #fff;
}

.header__element {
  padding: 0 20px;
  margin: 10px;
  border-right: 2px solid #ffce41;
  color: #ffce41;
}

.header__element:hover {
  color: #ffce41;
}

.header__nav,
.header__authorization {
  display: flex;
  flex-direction: row;
  text-transform: uppercase;
}

.header__signUp,
.header__signIn;
{
  border: 1px solid #ffce41;
  padding: 7px 10px;
  border-collapse: collapse;
}

.header__signIn {
  border-radius: 5px 0px 0px 5px;
  background-color: #ffce41;
}

.header__signIn:hover {
  background-color: #fff;
}

.header__signIn:hover~.header__signUp {
  background-color: #ffce41;
}

.header__signUp {
  border-radius: 0px 5px 5px 0px;
}

.header__signUp:hover {
  background-color: #ffce41;
}
<header class="header">
  <nav class="header__nav">
    <a href="#">
      <div class="header__element">
        about us
      </div>
    </a>
    <a href="#">
      <div class="header__element">
        how it work
      </div>
    </a>
    <a href="#">
      <div class="header__element">
        select your skills
      </div>
    </a>
    <a href="#">
      <div class="header__element">
        contact
      </div>
    </a>
  </nav>
  <div class="header__authorization">
    <div class="header__signIn">
      sign in
    </div>
    <div class="header__signUp" onmouseover="hover()" onmouseout="hover_out()">
      sign up
    </div>
  </div>

</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.