HTML Style borderLeftColor用法及代碼示例

borderLeftColor屬性允許我們設置/獲取元素左邊框的顏色。句法：

它用於返回borderLeftColor屬性。
```
object.style.borderLeftColor
```

它用於返回borderLeftColor屬性。

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

返回值：borderLeftColor屬性返回元素左邊框的顏色。
屬性值：

color:它指定相應元素的邊框顏色。黑色是默認顏色。

用法:

borderLeftColor = "red"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
     Click to change the left 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.borderLeftColor = "red"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在點擊按鈕之前
單擊按鈕後

用法:

borderLeftColor = "yellow"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
     Click to change the left 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.borderLeftColor = "yellow"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在點擊按鈕之前
單擊按鈕後

transparent:它將相應元素的邊框顏色設置為透明。

用法:

borderLeftColor = "transparent"

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        #GFG_Div { 
            width:200px; 
            margin-left:210px; 
            border:thick solid green; 
        } 
    </style> 
</head> 
  
<body align="center"> 
    <p>  
     Click to change the left 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.borderLeftColor = "transparent"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出：

在點擊按鈕之前
單擊按鈕後

initial:如果未為此字段指定任何值，則它將從element的父級繼承。如果沒有父元素，則表示此元素是root，則它采用初始(或默認)值。
inherit:此關鍵字將屬性的初始(或默認)值應用於元素。初始值不應與瀏覽器樣式表指定的值混淆。當borderColor設置為initial時，它顯示為黑色(默認)。

瀏覽器支持：下麵列出了DOM樣式borderLeftColor屬性支持的瀏覽器：

穀歌瀏覽器
IE瀏覽器
火狐瀏覽器
Opera
Safari

相關用法

注：本文由純淨天空篩選整理自PranchalKatiyar大神的英文原創作品 HTML | DOM Style borderLeftColor Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。