使用 JS 分配渐变在动态生成的渐变上失败

Question

如果 CSS 字符串是在运行时在 JS 中生成的，则为 HTML 元素分配渐变会失败，但如果它是定义为常量的字符串，则不会。我想在光标的位置生成一个径向渐变，但我简化了这个示例，只包含导致不需要的行为所需的代码行。

HTML：

<div class=buggy-gradient></div>
<div class=buggy-gradient></div>
<div class=buggy-gradient></div>

JS（不工作）：

let divs = document.getElementsByClassName('buggy-gradient');

for(i = 0; i < divs.length; i++){
  divs.item(i).addEventListener('mousemove', e => {
    let gradient = 'radial-gradient(circle at ' + e.clientX + ' ' + e.clientY + ', blue, red)';
    console.log(gradient);
    e.target.style.background = gradient;
  });
}

控制台日志显示我想要的 CSS 行，但分配它显然失败：

“径向渐变（1044 325 处的圆圈，蓝色，红色）”

JS（工作）：

let divs = document.getElementsByClassName('buggy-gradient');

for(i = 0; i < divs.length; i++){
  divs.item(i).addEventListener('mousemove', e => {
    e.target.style.background = 'radial-gradient(circle at 0 0, blue, red)';
  });
}

我做了一支笔：https://codepen.io/stairjoke/pen/poNgKbm

作为堆栈片段：

let divs = document.getElementsByClassName('buggy-gradient');

for(i = 0; i < divs.length; i++){
  divs.item(i).addEventListener('mousemove', e => {
    let gradient = 'radial-gradient(circle at ' + e.clientX + ' ' + e.clientY + ', blue, red)';
    console.log(gradient);
    e.target.style.background = gradient;
    // e.target.style.background = 'radial-gradient(circle at 0 0, blue, red)';
  });
}

div {
  height: 400px;
  width: 400px;
  background: radial-gradient(green, yellow);
  display: inline-block;
  margin: 5px;
}

<div class=buggy-gradient></div>
<div class=buggy-gradient></div>
<div class=buggy-gradient></div>

Answer 1

问题是您的价值观没有任何单位。 0 是一个特殊值，它不需要任何单位，但所有其他值都需要。

添加px即可解决问题：

let gradient = 'radial-gradient(circle at ' + e.clientX + 'px ' + e.clientY + 'px, blue, red)';
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^−−−−−−−−−−−−−−−−−−^^

FWIW，我会使用模板文字：

let gradient = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, blue, red)`;
// −−−−−−−−−−−−^−−−−−−−−−−−−−−−−−−−−−−−−−−^^−−−−−−−−−^^^−^^−−−−−−−−−^^^−−−−−−−−−−−−^

let divs = document.getElementsByClassName('buggy-gradient');

for(i = 0; i < divs.length; i++){
  divs.item(i).addEventListener('mousemove', e => {
    let gradient = `radial-gradient(circle at ${e.clientX}px ${e.clientY}px, blue, red)`;
    console.log(gradient);
    e.target.style.background = gradient;
  });
}

div {
  height: 400px;
  width: 400px;
  background: radial-gradient(green, yellow);
  display: inline-block;
  margin: 5px;
}

<div class=buggy-gradient></div>
<div class=buggy-gradient></div>
<div class=buggy-gradient></div>

Answer 2

您忘记在班级名称之间添加“”。

你可以在这里检查你的代码：

Code here

代码：

<div class="buggy-gradient"> Gradient1</div>
<div class="buggy-gradient">Gradient2</div>
<div class="buggy-gradient">Gradient3</div>
<script>
let divs = document.getElementsByClassName('buggy-gradient');

for(i = 0; i < divs.length; i++){
  divs.item(i).addEventListener('mousemove', e => {
    e.target.style = 'background:radial-gradient(circle at 0 0, blue, red)';
  });
  console.log('Show')
}
</script>