时间戳

首页 > 解决方案 > 为什么具有相同属性的两个对象不能以相同的方式工作

javascript - 为什么具有相同属性的两个对象不能以相同的方式工作

问题描述

在 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">

普朗克

标签： javascripthtmldom

解决方案

问题是您正在使用 querySelector 选择“输入元素”，而不是像使用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">

推荐阅读