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

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

0 голосов
/ 09 января 2019

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's 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>

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

Ответы [ 2 ]

0 голосов
/ 09 января 2019

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

Обратите внимание, что вы хотите изменить фактическое свойство. ; - это просто разделитель, используемый в 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>

Ура!

0 голосов
/ 09 января 2019

Чтобы сделать линейные градиенты с помощью 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

...