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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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