使用 JS 分配梯度在动态生成的梯度上失败

问题描述

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

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,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',red)';
    console.log(gradient);
    e.target.style.background = gradient;
    // e.target.style.background = 'radial-gradient(circle at 0 0,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>

解决方法

问题是您的值没有任何单位。 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,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,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>

,

您忘记在类名之间添加“”。

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

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,red)';
  });
  console.log('Show')
}
</script>