HTML | DOM 输入颜色值属性

简介

HTML5支持使用颜色值属性来设置元素的背景色、文本颜色等。在DOM中，可以通过JavaScript代码访问和修改元素的颜色值属性。

HTML颜色值属性

HTML颜色值可以使用预定义的颜色名称，也可以使用RGB、RGBA、HSL、HSLA和十六进制值。

预定义的颜色名称

HTML定义了16个颜色名称，分别为：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。

<p style="background-color: blue; color: white;">这是一段蓝色背景、白色字体的文本。</p>

RGB、RGBA颜色值

RGB颜色值可以使用 rgb() 函数表示，其中包含三个参数用于表示红、绿、蓝三原色的值，取值范围为0-255。而RGBA颜色值则在RGB的基础上增加了一个表示透明度的参数，取值范围为0-1。

<p style="background-color: rgb(255, 0, 0);">这是一段红色背景的文本。</p>
<p style="background-color: rgba(255, 0, 0, 0.5);">这是一段透明度为0.5的红色背景的文本。</p>

HSL、HSLA颜色值

HSL颜色值可以使用 hsl() 函数表示，其中包含三个参数用于表示色相、饱和度、亮度的值，取值范围为0-360、0%-100%、0%-100%。而HSLA颜色值则在HSL的基础上增加了一个表示透明度的参数，取值范围为0-1。

<p style="background-color: hsl(0, 100%, 50%);">这是一段红色背景的文本。</p>
<p style="background-color: hsla(0, 100%, 50%, 0.5);">这是一段透明度为0.5的红色背景的文本。</p>

十六进制颜色值

十六进制颜色值以 # 开头，后面跟着6个表示红、绿、蓝三原色的16进制数，每两位表示一个颜色值。当需要设置RGBA色值时，可以在6个数字后面添加2个表示透明度的16进制数，取值范围为00-FF。

<p style="background-color: #FF0000;">这是一段红色背景的文本。</p>
<p style="background-color: #FF0000BF;">这是一段透明度为0.75的红色背景的文本。</p>

JavaScript操作颜色值属性

在JavaScript中，可以通过 style 对象的 backgroundColor 和 color 属性获取和设置元素的背景色和文本颜色。

// 获取元素的背景色和文本颜色
var elem = document.getElementById("myElem");
var bgColor = elem.style.backgroundColor;
var textColor = elem.style.color;

// 设置元素的背景色和文本颜色
elem.style.backgroundColor = "green";
elem.style.color = "white";

结论

在HTML中，可以使用多种方式设置元素的颜色值，包括预定义的颜色名称、RGB、RGBA、HSL、HSLA和十六进制值。而在JavaScript中，可以通过 style 对象的 backgroundColor 和 color 属性获取和设置元素的颜色值。