HTML | DOM 样式 borderColor 属性

1. 概述

borderColor 属性用于设置 HTML 元素的边框颜色。它是 CSS border-color 属性的 JavaScript 对象表示法（JavaScript Object Notation，JSON）形式。

2. 语法

element.style.borderColor = color|initial|inherit;

• element：表示 HTML 元素的 JavaScript 对象。
• color：表示边框颜色的字符串值。可以是命名颜色（如 "red"）或十六进制颜色（如 "#ff0000"）。
• initial：恢复属性的默认值。
• inherit：继承父元素的属性值。

3. 示例

3.1 设置边框颜色为红色

document.getElementById("myElement").style.borderColor = "red";

3.2 使用命名颜色设置边框颜色

document.getElementById("myElement").style.borderColor = "blue";

3.3 使用十六进制颜色设置边框颜色

document.getElementById("myElement").style.borderColor = "#00ff00";

3.4 恢复边框颜色为初始值

document.getElementById("myElement").style.borderColor = "initial";

3.5 继承父元素的边框颜色属性值

document.getElementById("myElement").style.borderColor = "inherit";

4. 注意事项

• borderColor 属性设置的是所有四个边框的颜色值。
• 如果需要单独设置每个边框的颜色，可以使用 borderTopColor、borderRightColor、borderBottomColor 和 borderLeftColor 属性。
• 当元素没有边框时，设置 borderColor 属性是不会产生效果的。

以上就是关于 borderColor 属性的介绍，希望对你有所帮助！