HTML DOM Style borderColor 属性

桃奈叶子

Style borderColor 属性


定义和用法

borderColor 属性设置或返回元素边框的颜色。

该属性可使用 1 到 4 种颜色:

  • 如果规定一种颜色,比如:p {border-color: red} - 所有四个边框都是红色。
  • 如果规定两种颜色,比如:p {border-color: red transparent} - 上边框和下边框是红色,而左边框和右边框是透明的。
  • 如果规定三种颜色,比如:p {border-color: red green blue}- 上边框是红色,左边框和右边框是绿色,下边框是蓝色。
  • 如果规定四种颜色,比如:p {border-color: red green blue yellow} - 上边框是红色,右边框是绿色,下边框是蓝色,左边框是黄色。

语法

设置 borderColor 属性:


Object.style.borderColor="color|transparent|inherit"

返回 borderColor 属性:


Object.style.borderColor


描述
color 规定边框的颜色。在 CSS 颜色值 中寻找可能的颜色值的完整列表。
transparent 默认。边框的颜色是透明的(基本内容将会穿透)。
inherit 边框的颜色从父元素继承。


浏览器支持

HTML DOM Style borderColor 属性HTML DOM Style borderColor 属性HTML DOM Style borderColor 属性HTML DOM Style borderColor 属性HTML DOM Style borderColor 属性

所有主要浏览器都支持 borderColor 属性。

注意:IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。


实例

更改四个边框的颜色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#ex1{
    border: thick solid #FF0000;
}
</style>
<script>
function displayResult(){
    document.getElementById("ex1").style.borderColor="#00FF00 #0000FF";
}
</script>
</head>
<body>

<div id="ex1">这是一些文本。</div>
<br>
<button type="button" onclick="displayResult()">修改四个边框的颜色</button>

</body>
</html>


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码