HTML Style borderBottomColor用法及代碼示例

HTML DOM中的Style borderBottomColor屬性用於設置或返回元素底部邊框的顏色。

用法:

它返回borderBottomColor屬性。
```
object.style.borderBottomColor
```

它用於設置borderBottomColor屬性。

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

屬性值：

color:它指定相應元素的底部邊框顏色。默認顏色是黑色。
transparent:它將相應元素的底部邊框顏色設置為透明。
initial:它將borderBottomColor屬性設置為其默認值。
Inherit:此屬性從其父元素繼承。

返回值：它返回一個字符串，該字符串表示元素底部邊框的顏色。

範例1：本示例將底部邊框的顏色更改為黑色。

<!DOCTYPE html>  
<html>  
  
<head>  
    <title> 
        Style borderBottomColor Property 
    </title> 
      
    <style>  
        #GFG_Div {  
            width:400px;  
            margin-left:210px;  
            border:thick solid green;  
        }  
    </style>  
</head>  
  
<body align="center">  
      
    <div id="GFG_Div"> 
        <h1>GeeksforGeeks</h1> 
          
        <h2> 
            DOM Style borderBottomColor Property 
        </h2> 
          
        <p> 
            Click to change the bottom border 
            color of an element 
        </p>  
    </div> 
      
    <br> 
      
    <button type="button" onclick="myGeeks()">  
        Click to change  
    </button>  
      
    <!-- Script to use Style borderBottomColor 
        Property -->
    <script>  
        function myGeeks() {  
            document.getElementById("GFG_Div")  
                .style.borderBottomColor = "blue";  
        }  
    </script>  
  
</body>  
  
</html>

輸出：

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

範例2：本示例將底部邊框的顏色更改為透明值。

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

輸出：

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

支持的瀏覽器：下麵列出了style borderBottomColor屬性支持的瀏覽器：

穀歌瀏覽器1.0
Internet Explorer 4.0
Firefox 1.0
Opera 3.5
Safari 1.0

相關用法

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