HTML | DOM 样式 borderWidth 属性

HTML DOM 中的borderWidth属性用于设置或返回边框元素的宽度。

句法：

• 用于设置宽度的边框。

object.style.borderWidth = value

• 它返回边框宽度属性。

object.style.borderWidth

返回值：它返回具有给定样式的选定边框元素。

下面列出了六种不同的 border-width 属性值：

厚：将边框宽度设置为厚。

句法：

document.getElementById("id_name").style.borderWidth = "thick";

例子 ：

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        div {
            border: 1px solid green;
            padding: 10px;
            text-align: center;
        }
    

 

 
    
         
Welcome to GeeksforGeeks.!
 
         

          This tutorial is on
          HTML | DOM Style borderWidth Property.
        
 
    
    
    
 
    
        function myFunction() {
            document.getElementById("d1").style.borderWidth
                                                 = "thick";
        }
    
 

 

输出：
点击按钮前：

点击按钮后：

length：用于将边框宽度的每一边设置为给定的长度。长度可以用px、em等来设置。

句法：

document.getElementById("id_name").style.borderWidth =
top_px right_px bottom_px left_px;

示例：本示例设置每一边的边框宽度。

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        div {
            border-style: solid;
            border: 1px solid green;
            padding: 10px;
            text-align: center;
        }
    

 

 
    
         
Welcome to GeeksforGeeks.!
 
         

          This tutorial is on
          HTML | DOM Style borderWidth Property.
        
 
    
    
    
    
        function mainFunction() {
            document.getElementById("d1").style.borderWidth
                                      = "1px 7px 15px 25px";
        }
    
 

 

输出：
点击按钮前：

点击按钮后：

Thin：用于设置边框宽度为细。

句法：

document.getElementById("id_name").style.borderWidth = "thin";

例子：

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        div {
            border: 8px solid green;
            padding: 10px;
            text-align: center;
        }
    

 

 
    
         
Welcome to GeeksforGeeks.!
 
         

          This tutorial is on
          HTML | DOM Style borderWidth Property.
        
 
    
    
    
 
    
        function myFunction() {
            document.getElementById("d1").style.borderWidth
                                                  = "thin";
        }
    
 

 

输出：
点击按钮前：

点击按钮后：

中：用于将边框更改为中。它是边框宽度的默认值。

句法：

document.getElementById("id_name").style.borderWidth = "medium";

例子：

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        div {
            border: 30px solid green;
            padding: 10px;
            text-align: center;
        }
    

 

 
    
         
Welcome to GeeksforGeeks.!
 
         

          This tutorial is on
          HTML | DOM Style borderWidth Property.
        
 
    
    
    
 
    
        function myFunction() {
            document.getElementById("d1").style.borderWidth
                                                = "medium";
        }
    
 

 

输出：
点击按钮前：

点击按钮后：

继承：它指定从其父元素继承的边框宽度属性。

句法：

document.getElementById("id_name").style.borderWidth = "inherit";

例子：

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        span {
            color: blue;
            border: 3px solid black;
            padding: 3px;
        }
         
        .d1 span {
            color: inherit;
        }
         
        div {
            padding: 5px;
            display: block;
            margin: 6px;
        }
         
        .c2 {
            width: 50%;
            height: 40%;
            padding: 20px;
            border: 2px solid green;
        }
    

 

    
        
            This is first
            span element.
        
 
        
            This is second
          span element.
        
 
        
            This is third
          span element.
        
    
    
    
    
        function myFunction() {
            document.getElementById("gfg").style.borderWidth
                                                = "inherit";
        }
    

 

输出：

点击按钮前：

点击按钮后：

初始：将 borderWidth 属性设置为其默认值。

句法：

document.getElementById("id_name").style.borderWidth = "initial";

例子：

HTML

 

    
        HTML | DOM Style borderWidth Property
    
    
        div {
            border: 10px solid;
            border-color: green;
            padding: 10px;
            text-align: center;
        }
    

 

 
    
         
Welcome to GeeksforGeeks.!
 
         

          This tutorial is on
          HTML | DOM Style borderWidth Property. 
 
    
    
    
 
    
        function myFunction() {
            document.getElementById("d1").style.borderWidth
                                               = "initial";
        }
    
 

 

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM borderWidth 属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 苹果浏览器
• 歌剧