Javascript 样式对象将复杂的颜色名称转换为 rgb

Javascript style object converts complex color names into rgb

本文关键字：转换 rgb 颜色 样式 对象 复杂 Javascript      更新时间：2023-09-26

有没有办法在将复杂的 CSS 颜色名称应用于 document.getElementById(xxx).style 对象中的 DOM 元素时，重写 javascript 如何将复杂的 CSS 颜色名称转换为 rgb 值。

例如：设置 document.getElementById("colorMe").style.background = "lightblue" 将设置具有背景 = "rgb(...)" 的 "DOMElement".style 对象

。

但是，设置 document.getElementById("colorMe").style.background = "蓝色" 将使用 background = "blue" 设置"DOMElement".style对象。

我想要所有颜色名称情况的第二个版本，而不仅仅是简单的颜色名称。

我想绕过javascript如何将该颜色转换为复杂颜色名称的RGB值。这可能吗？

编辑：我知道有办法来回转换，我只是想绕过javascript似乎如何"为我"转换它们......我希望它保持为"浅蓝色"，并且浏览器似乎可以将浅蓝色作为背景颜色处理得很好。

您可以使用

setAttribute：

element.setAttribute('style', 'background-color: lightblue');

要保留现有的内联样式：

var box = document.getElementById("box"),
    old_style = box.getAttribute('style');
box.setAttribute('style', old_style + ' background-color: lightblue;');

演示

请注意，内联background-color是"浅蓝色"而不是"rgb（173， 216， 230）"。

相关文章：