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

Ваш ответ

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

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