HTML | DOM 样式 borderLeft 属性

介绍

borderLeft 属性用于设置 HTML 元素左边边框的宽度、样式和颜色。它是 CSS border-left 属性的 JavaScript 对象表示。该属性可以通过 DOM 编程接口进行修改，这使得开发人员可以动态地更改 HTML 元素的外观。

语法

使用 JavaScript 进行设置的语法如下：

object.style.borderLeft = "border_left_width border_left_style border_left_color"

其中，object 是要设置样式的 DOM 元素，可通过 JavaScript 或 jQuery 获取。border_left_width、border_left_style 和 border_left_color 分别指定边框的宽度、样式和颜色，其可能的取值可以与 CSS 中的 border-left 属性相同。

例如，如下代码将元素 id 为 "myDiv" 的左边框宽度设置为 3px，样式设置为 "dashed"，颜色设置为红色：

document.getElementById("myDiv").style.borderLeft = "3px dashed red";

属性值

以下是 borderLeft 属性的各个可能的取值：

• border_left_width：指定边框的宽度，大小以像素为单位。例如，"3px" 表示 3 像素的宽度。
• border_left_style：指定边框的样式。可能的值包括："none"（无边框）、"hidden"（隐藏边框）、"dotted"（点状边框）、"dashed"（虚线边框）、"solid"（实线边框）、"double"（双线边框）、"groove"（3D 凹槽边框）和 "ridge"（3D 融合边框）。
• border_left_color：指定边框的颜色。可以使用颜色的名称（如 "red"），RGB 值（如 "rgb(255, 0, 0)"）或十六进制值（如 "#FF0000"）来表示。如果未设置，则默认为元素的文本颜色。

示例

以下是一些使用 borderLeft 属性的实际示例。

示例 1

将元素的左边框宽度设置为 5 像素，颜色设置为蓝色，样式为虚线：

document.getElementById("myDiv").style.borderLeft = "5px dashed blue";

示例 2

将所有 class 为 "box" 的 div 元素的左边框颜色设置为红色：

var boxes = document.getElementsByClassName("box");
for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.borderLeftColor = "red";
}

示例 3

为具有 class 为 "alert" 的所有元素添加 10 像素的蓝色 3D 边框：

var alerts = document.getElementsByClassName("alert");
for (var i = 0; i < alerts.length; i++) {
    alerts[i].style.borderLeft = "10px groove blue";
}

参考

• CSS border-left 属性
• HTML DOM style borderTop 属性