JavaScript HTML DOM Style borderColor 属性

  • borderColor 属性

    borderColor属性设置或返回元素边框的颜色。此属性可以包含一到四个值:
    • 一个值,如:p {border-color:red} - 所有四个边框都是红色的
    • 两个值,如:p {border-color:red transparent} - 顶部和底部边框将为红色,左右边框将为透明
    • 三个值,如:p {border-color:red green blue} - 顶部边框为红色,左右边框为绿色,底部边框为蓝色
    • 四个值,如:p {border-color:red green blue yellow} - 顶部边框为红色,右边框为绿色,底部边框为蓝色,左边框为黄色
    将<div>元素的四个边框的颜色更改为红色:
    document.getElementById("myDiv").style.borderColor = "red";
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    borderColor
    4.0+
    1.0+
    1.0+
    1.0+
    3.5+
  • 语法

    返回borderColor属性:
    object.style.borderColor
    设置borderColor属性:
    object.style.borderColor = "color|transparent|initial|inherit"
  • 属性值

    描述
    color 指定边框的颜色。 查看CSS颜色值以获取可能颜色值的完整列表。 默认颜色为黑色
    transparent 边框的颜色是透明的(底层内容会透过)
    initial 将此属性设置为其默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息
  • 技术细节

    项目 描述
    默认值: black
    返回值: 一个字符串,表示元素边框的颜色
    CSS版本 CSS1
  • 更多例子

    将<div>元素的顶部和底部边框的颜色更改为绿色,将左右边框的颜色更改为紫色:
    document.getElementById("myDiv").style.borderColor = "green purple";
    
    尝试一下
    返回<div>元素的边框颜色:
    alert(document.getElementById("myDiv").style.borderColor);
    
    尝试一下
  • 相关页面

    CSS参考:border-color属性
    CSS教程:CSS边框