我正在寻找style.background的解决方案

时间:2019-06-02 10:13:06

标签: javascript string ecmascript-6

我想创建“互动背景”。当我移动鼠标时,背景将发生变化。 我尝试使用[*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的地方添加了值。

2 个答案:

答案 0 :(得分:2)

如果支持字符串插值:

colorbox.style.background = `rgb(${hex_a}, ${hex_b}, ${hex_c})`;

其他:

colorbox.style.background = 'rgb(' + hex_a + ', ' + hex_b + ', ' + hex_c + ')';

此外,请记住clientXclientY可能(并且在您的情况下肯定会)返回大于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 + ")";