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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。