css 为什么background属性值为rgba？

l7wslrjt 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(158)

有一个函数可以生成十六进制字符串。

function getRandomHexColor() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

我调用函数并将返回值赋给background，在控制台中看到的不是#ffffff（例如），而是rgba值。

试图找到解决问题的办法，但没有找到解决办法。

const btn = document.querySelector(".change-color");
const nameColor = document.querySelector(".color");
btn.addEventListener("click", changeColor);

function changeColor() {
  document.body.style.background = getRandomHexColor();
  nameColor.textContent = getRandomHexColor();
}

css

来源：https://stackoverflow.com/questions/75568825/why-is-the-background-property-value-rgba

1条答案

按热度按时间

ijnw1ujt1#

浏览器以最佳方式显示颜色。无论您使用HEX表示还是RGBA表示，结果都是相同的。当您设置背景色时，浏览器将计算并显示背景色，您在DevTools窗口中看到的是the computed CSS value，在本例中以RGB表示。
但是，如果您愿意，可以通过Shift+单击DevTools中的颜色框来查看其他颜色表示：

还有另一种方法可以显示指定的颜色（Chrome DevTools converts all HEX Colors to RGB），但现在已弃用。
另外，请注意，您可能会遇到此函数的问题：

function changeColor() {
  document.body.style.background = getRandomHexColor();
  nameColor.textContent = getRandomHexColor();
}

您将调用getRandomHexColor()两次，每次都将返回一个新结果，这意味着nameColor.textContent中的颜色与document.body.style.background中的颜色不同
要解决此问题，您可以将函数输出设置为一个变量，然后使用它：

function changeColor() {
  const myColor = getRandomHexColor();
  document.body.style.background = myColor;
  nameColor.textContent = myColor;
}

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-02-26

我来回答

css 为什么background属性值为rgba？

1条答案

相关问题

热门标签

最新问答