如何解决使用 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>
您忘记在类名之间添加“”。
您可以在这里检查您的代码:
代码:
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。