有一个函数可以生成十六进制字符串。
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();
}
1条答案
按热度按时间ijnw1ujt1#
浏览器以最佳方式显示颜色。无论您使用HEX表示还是RGBA表示,结果都是相同的。当您设置背景色时,浏览器将计算并显示背景色,您在DevTools窗口中看到的是the computed CSS value,在本例中以RGB表示。
但是,如果您愿意,可以通过Shift+单击DevTools中的颜色框来查看其他颜色表示:
还有另一种方法可以显示指定的颜色(Chrome DevTools converts all HEX Colors to RGB),但现在已弃用。
另外,请注意,您可能会遇到此函数的问题:
您将调用
getRandomHexColor()
两次,每次都将返回一个新结果,这意味着nameColor.textContent
中的颜色与document.body.style.background
中的颜色不同要解决此问题,您可以将函数输出设置为一个变量,然后使用它:
一个一个二个一个一个一个三个一个一个一个一个一个四个一个