1

Есть блок с тестом, который меняет цвет фона по нажатию на кнопки. Как выставить в JS цвет так, чтобы он менялся на градиент.

window.onload = function() {
  document.getElementById('linkinclr').onclick = function() {
    document.getElementById("clrmen").style.backgroundColor = "#f2f1ec";

    return false;
  }
  document.getElementById('linkinclr2').onclick = function() {
    document.getElementById("clrmen").style.backgroundColor = "#f2f1ec";
    return false;
  }
  document.getElementById('linkinclr3').onclick = function() {
    document.getElementById("clrmen").style.backgroundColor = "#f2f1ec";
    return false;
  }
  document.getElementById('linkinclr4').onclick = function() {
    document.getElementById("clrmen").style.backgroundColor = "#f2f1ec";
    return false;
  }
}
<nav id="clrmen" id="cpock" class="l-nav pushy pushy-left" style="visibility: visible;">
  <!-- Menu Button -->
  <ol>
    <ul id="menu-primary-menu" class="l-nav__menu">

      <p>
        <li id="linkin">
          <a id="linkinclr" class="animsition-link" href="gallery.html" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">Gallery</div>
          </a>
        </li>
      </p>
      <p>
        <li id="linkin">
          <a id="linkinclr2" class="animsition-link" href="about.html" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">About</div>
          </a>
        </li>
      </p>
      <p>
        <li id="linkin">
          <a id="linkinclr3" class="animsition-link" href="courses.html" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">Courses</div>
          </a>
        </li>
      </p>

1
  • Не совсем понятно, зачем менять фон, если у ссылок заполнен атрибут href="..."? Ну и сама разметка не очень валидная.
    – user256824
    20 июн 2019 в 15:00

1 ответ 1

0

Вместо стиля backgroundColor используйте background. В примере градиент отобразится при клике на "Courses", так как применится стиль background:linear-gradient(to top, #8ed9ff, #5165ff).

window.onload = function() {
  document.getElementById('linkinclr').onclick = function() {
    document.getElementById("clrmen").style.background = "#f2f1ec";

    return false;
  }
  document.getElementById('linkinclr2').onclick = function() {
    document.getElementById("clrmen").style.background = "#f2cccc";
    return false;
  }
  document.getElementById('linkinclr3').onclick = function() {
    document.getElementById("clrmen").style.background = "linear-gradient(to top, #8ed9ff, #5165ff)";
    return false;
  }
}
<nav id="clrmen" id="cpock" class="l-nav pushy pushy-left" style="visibility: visible;">
  <!-- Menu Button -->
  <ol>
    <ul id="menu-primary-menu" class="l-nav__menu">

      <p>
        <li id="linkin">
          <a id="linkinclr" class="animsition-link" href="#" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">Gallery</div>
          </a>
        </li>
      </p>
      <p>
        <li id="linkin">
          <a id="linkinclr2" class="animsition-link" href="#" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">About</div>
          </a>
        </li>
      </p>
      <p>
        <li id="linkin">
          <a id="linkinclr3" class="animsition-link" href="#" data-animsition-out-class="overlay-slide-out-left">
            <div class="ml">Courses</div>
          </a>
        </li>
      </p>
      <ol>
        <nav>

2
  • Спасибо участнику BalticDog за отличный ответ, все работает.
    – All In
    21 июн 2019 в 5:29
  • @AllIn, будет здорово, если вы отметите мой ответ верным. Так и на ваши вопросы в будущем будут отвечать более охотно, заранее спасибо. :)
    – BalticDog
    21 июн 2019 в 12:41

Ваш ответ

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

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