почему два объекта с одинаковым свойством не работают одинаково

Question

При выполнении задачи в Javascript30 я заметил, что

document.querySelectorAll('input')[0].style.setProperty и document.documentElement.style.setProperty выводят тот же объект, но первый не работает, когда я пытаюсь установить свойство.

Я хочучтобы понять, почему первый не работает, а второй работает.

Я сделал console.log для просмотра вывода обеих строк кода.

let controller = document.querySelectorAll(".controller input");

//console.log(document.querySelectorAll('input')[0].style.setProperty);
//console.log(document.documentElement.style.setProperty);
function handleChange() {
  const suffix = this.dataset.sizing || "";
  document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
  /*document.querySelectorAll('input').forEach((input) => {
   input.style.setProperty(`--${this.name}`, this.value + suffix);
  });*/
}

controller.forEach(input => input.addEventListener('change', handleChange));
controller.forEach(input => input.addEventListener('mousemove', handleChange));

body {
  text-align: center;
  color: white;
  background-color: rgb(150, 200, 140);
}

:root {
  --blur: 10px;
  --spacing: 10px;
  --color: red;
}

img {
  padding: var(--spacing);
  filter: blur(var(--blur));
  background: var(--color);
}

<header>Playing with CSS variables and JS</header>
<div class="controller">
  <label for="spacing">Spacing: </label>
  <input type="range" min="10" max="200" id="spacing" name="spacing" value="10" data-sizing="px">
  <label for="blur">Blur: </label>
  <input type="range" min="0" max="30" id="blur" name="blur" value="10" data-sizing="px">
  <label for="color">Base Color</label>
  <input type="color" id="color" name="color">
</div>
<img src="https://res.cloudinary.com/dzwmmrwr2/image/upload/v1542708495/6_kmfxtt.png" alt="image" width="300" height="350">

Плункер

Answer 1

Проблема в том, что вы выбираете 'input-elements', используя querySelector, вместо 'html-element', как вы делаете с document.documentElement

, используя document.querySelectorAll('html') вместо document.querySelectorAll('input')должен решить вашу проблему:

// Code goes here

let controller = document.querySelectorAll(".controller input");

function handleChange() {
  const suffix = this.dataset.sizing || "";
  document.querySelectorAll('html').forEach((input) => {
    input.style.setProperty(`--${this.name}`, this.value + suffix);
  });
}

controller.forEach(input => input.addEventListener('change', handleChange));
controller.forEach(input => input.addEventListener('mousemove', handleChange));

body {
  text-align: center;
  color: white;
  background-color: rgb(150, 200, 140);
}

:root {
  --blur: 10px;
  --spacing: 10px;
  --color: red;
}

img {
  padding: var(--spacing);
  filter: blur(var(--blur));
  background: var(--color);
}

<header>Playing with CSS variables and JS</header>
<div class="controller">
  <label for="spacing">Spacing: </label>
  <input type="range" min="10" max="200" id="spacing" name="spacing" value="10" data-sizing="px">
  <label for="blur">Blur: </label>
  <input type="range" min="0" max="30" id="blur" name="blur" value="10" data-sizing="px">
  <label for="color">Base Color</label>
  <input type="color" id="color" name="color">
</div>
<img src="https://res.cloudinary.com/dzwmmrwr2/image/upload/v1542708495/6_kmfxtt.png" alt="image" width="300" height="350">