使用 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 行，但分配它显然失败了：

"radial-gradient(circle at 1044 325, blue, red)"

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

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

您可以在此处检查您的代码：

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>

Answer 2

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

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

Assigning gradient using JS fails on dynamically generated gradient

javascript

css

frontend

radial-gradients

dom-events