Question

我一直在研究一种涉及色彩的游戏。

colors[0] = "RGB(205, 248, 46)";
squares[0].style.background = "rgb(205, 248, 46)";

当我这样做时：

squares[0].style.background = colors[0];

然后检查方块的颜色 - 它没有分配，它仍然和以前一样！：

console.log(squares[0].style.background);
"rgb(205, 248, 46)"

我需要那些信件作为资本。

Answer 1

总之，你不能。 The spec actually states rgb应为小写。因此，浏览器通过在将其存放之前为您降低它来帮助您。你以后得到的是正确格式化的字符串。

如果你真的需要大写，你可以使用toUpperCase。

var colors = [];
var squares = document.querySelectorAll('div');
colors[0] = "RGB(205, 248, 46)";
squares[0].style.background = "rgb(205, 248, 46)";

document.querySelector('pre').innerText = squares[0].style.background.toUpperCase();

div {
  background: #BEF;
  width: 50px;
  height: 50px;
}

<div></div>
<div></div>
<pre></pre>

Answer 2

您可以添加另一个调用，将辅助属性设置为＆＃34;字面值＆＃34;。

colors[0] = "RGB(205, 248, 46)";
squares[0].style.background = colors[0];
squares[0].setAttribute('data-background-literal', colors[0]);

然后使用此

访问它

console.log(squares[0].getAttribute('data-background-literal'));

Answer 3

因为CSS spec requires that RGB colors use the lowercase prefix，浏览器会将您的输入（使用大写字母）转换为正确的小写值并正确设置颜色。但是，在取回它时，您将看到实际使用的转换（小写）值as seen here：

const squares = [1, 2].map((i) => document.getElementById(`color-${i}`));
const output = document.getElementById('output');

squares[0].style.background = "rgb(205, 248, 46)";
squares[1].style.background = "RGB(205, 248, 46)";

for (let s of squares) {
    output.textContent += s.style.background + '\n';
}

浏览器不需要支持大写的颜色，因此您应该完全避免使用它。在分配样式之前转换得很好，但是如果可以的话，从rgb(r, g, b)开始将是更好的选择。

Answer 4

解决方案是将CSS中的字母大写为： text-transform：uppercase;

的JavaScript。变量未正常分配

4 个答案: