HTML Style borderTopColor用法及代码示例

borderTopColor属性允许我们设置/获取元素顶部边框的颜色。
用法:

它返回borderTopColor属性。
```
object.style.borderTopColor
```

它用于设置borderTopColor属性。

object.style.borderTopColor = "color|transparent|initial|
inherit"

返回值：borderTopColor属性返回元素顶部边框的颜色。
属性值：

color:它指定相应元素的顶部边框颜色。黑色是默认颜色。

用法:

borderTopColor = "red"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderTopColor Property 
    </title> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
     Click to change the right border  
     color of element. 
    </p> 
    <button type="button" onclick="myGeeks()"> 
     Click to change 
    </button> 
    <br> 
    <br> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG_Div") 
                .style.borderTopColor = "red"; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在点击按钮之前
单击按钮后

用法:

borderTopColor = "yellow"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderTopColor Property 
    </title> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
     Click to change the top border  
     color of element. 
    </p> 
    <button type="button" onclick="myGeeks()"> 
     Click to change 
    </button> 
    <br> 
    <br> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG_Div") 
                .style.borderTopColor = "yellow"; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在点击按钮之前
单击按钮后

transparent:它将相应元素的顶部边框颜色设置为透明。

用法:

borderTopColor = "transparent"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style borderTopColor Property 
    </title> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
      Click to change the right border  
      color of element.</p> 
    <button type="button" onclick="myGeeks()"> 
      Click to change 
    </button> 
    <br> 
    <br> 
    <div id="GFG_Div">GeeksforGeeks</div> 
    <script> 
        function myGeeks() { 
            document.getElementById("GFG_Div") 
                .style.borderTopColor = "transparent"; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在点击按钮之前
单击按钮后

initial:如果未为此字段指定任何值，则它将从element的父级继承。如果没有父元素，则表示此元素是root，则它采用初始(或默认)值。
inherit:此关键字将属性的初始(或默认)值应用于元素。初始值不应与浏览器样式表指定的值混淆。当borderColor设置为initial时，它显示为黑色(默认)。

浏览器支持：下面列出了DOM Style borderTopColor属性支持的浏览器：

谷歌浏览器
IE浏览器
火狐浏览器
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自PranchalKatiyar大神的英文原创作品 HTML | DOM Style borderTopColor Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。