我想创建“互动背景”。当我移动鼠标时,背景将发生变化。
我尝试使用[*self.D[i]]
显然,它无法工作。
object.style.background = "rgb(".hex_a.",".hex_b.",".hex_c.")";
在const paragrapf = document.getElementById("content");
const namebox = document.getElementById("namebox");
const colorbox = document.getElementById("colorbox");
const hashbox = document.getElementById("hashbox");
document.onmousemove = function(e){
var hex_a = e.clientX;
var hex_b = e.clientY;
var hex_c = e.clientX;
colorbox.style.background = "rgb("hex_a", "hex_b", "hex_c")";
}
我尝试在值之间添加点。我尝试添加不带“引号”的值。 我什至直接在打算使用0-255的地方添加了值。
答案 0 :(得分:2)
如果支持字符串插值:
colorbox.style.background = `rgb(${hex_a}, ${hex_b}, ${hex_c})`;
其他:
colorbox.style.background = 'rgb(' + hex_a + ', ' + hex_b + ', ' + hex_c + ')';
此外,请记住clientX
和clientY
可能(并且在您的情况下肯定会)返回大于255的值,这将在使用{{1} }功能。
您必须对范围进行某种映射。您可以在此处了解更多信息:https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX
答案 1 :(得分:1)
最简单的解决方案是串联:
colorbox.style.background = "rgb(" + hex_a + ", " + hex_b + ", " + hex_c + ")";