JavaScript body.style.background не работает с линейным градиентом в script.js, но отлично работает в консоли

Question

JavaScript body.style.background не работает с линейным градиентом в script.js, но отлично работает в консоли

1

body.style.background = не работает в включенном файле script.js, все остальное работает, работают селекторы cashed dom, набирая body.style.background = 'red'; работает но не во включенном файле

Я попробовал console.logs, как описано в приведенном ниже коде, особенность вывода заключается в том, что если я скопирую логи из обратных вызовов и вставлю их в body.style.background, это будет работать, но не в файле сценария.

color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");

function changeBackgroundColor() {
    body.style.background = "linear-gradient(to right, "+color_1.value+ ", "+ color_2.value+");";

//************* I am getting the console.logs but the background not changing

    console.log("linear-gradient(to right, " + color_1.value + ", " + color_2.value + ");");
}

//************* Both the listeners work fine and the cashed selectors

color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);

<html>
  <head>
      <title>Background Color Generator</title>

      <!-- Custom Styles -->
      <style type="text/css">
          body {
                  background: linear-gradient(to right, red , yellow);
          }
      </style>

  </head>

  <body>
      <div class="container">
          <input id="color-1" type="color">
          <input id="color-2" type="color">
      </div>

  </body>
</html>

Фон должен менять цвет при изменении цвета, но ничего не происходит.

Pushparaj Vaghela 09 янв. 2019, в 13:42

Источник

Теги:

javascript

background

dom

linear-gradients

2 ответа

0

Вы были довольно близки к правильному ответу. Единственное, что вам нужно сделать, это удалить из вашего кода ; где вы делаете изменение градиента (так должно быть color_2.value + ")"; а не color_2.value + ");"; ,

Обратите внимание, что вы хотите изменить фактическое свойство. The ; это просто разделитель, используемый в CSS для различения отдельных свойств, он вам не нужен, когда вы изменяете их из кода.

Ниже у вас есть рабочий пример.

color_1 = document.querySelector("#color-1");
color_2 = document.querySelector("#color-2");
body = document.querySelector("body");

function changeBackgroundColor() {
    body.style.backgroundImage = "linear-gradient(to right, " +color_1.value+ ", "+ color_2.value + ")";
}

//************* Both the listeners work fine and the cashed selectors
color_1.addEventListener("input", changeBackgroundColor);
color_2.addEventListener("input", changeBackgroundColor);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
    <title>Background Color Generator</title>

    <!-- Custom Styles -->
    <style type="text/css">
        body {
                height: 100vh;
                background: linear-gradient(to right, red , yellow);
        }
    </style>

</head>

<body>
    <div class="container">
        <input id="color-1" type="color">
        <input id="color-2" type="color">
    </div>


    <!-- Custom Javascript -->
    <script src="script.js"></script>
</body>
</html>

Ура!

Adrian Pop 09 янв. 2019, в 09:52

Ещё вопросы

Yuschick · Accepted Answer · 2019-01-09T09-48-00.000Z

Чтобы сделать линейные градиенты с помощью JavaScript, как это, вам нужно получить доступ к свойству body.style.backgroundImage. Затем вы можете передать строку linear-gradient чтобы построить градиент.

function changeBackgroundColor() {
body.style.backgroundImage = "linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";

Небольшая заметка: всякий раз, когда вы передаете свою строку (в этом случае или когда вы устанавливаете свойства CSS таким образом), вам не нужно указывать трейлинг ; что CSS ожидает. Итак, строка у вас есть:

"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +");";

Обратите внимание на первое ; у вас есть Следует оставить, чтобы оставить вас с этой строкой:

"linear-gradient(to right, "+ color_1.value +", "+ color_2.value +")";

Вы можете найти несколько примеров на MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

И на W3Schools:
https://www.w3schools.com/jsref/prop_style_backgroundimage.asp