当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。