HTML | DOM 样式 borderLeftWidth 属性

DOM Style borderLeftWidth属性用于设置或返回元素左边框的宽度。

句法：

• 获取 borderLeftWidth 属性

  object.style.borderLeftWidth

• 设置 borderLeftWidth 属性

  object.style.borderLeftWidth = "thin | medium | thick | length |
  initial | inherit"

属性值：

1. 细：这用于定义一个细的左边框。

   示例 1：

     
   
       
         DOM Style BorderLeftWidth
       
     
       
           .elem {
               padding: 10px;
               border-style: solid;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
           GeeksforGeeks is a computer science
         portal with a huge variety of well written and
         explained computer science and programming
         articles, quizzes and interview questions.
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = 'thin';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

2. medium：这用于定义中等左边框。这是默认值。

   示例 2：

     
   
       
         DOM Style BorderLeftWidth
       
       
           .elem {
               padding: 10px;
               border-style: solid;
               border-left-width: thin;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
           GeeksforGeeks is a computer science
         portal with a huge variety of well
         written and explained computer 
         science and programming articles, 
         quizzes and interview questions.
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = 'medium';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

3. 厚：这用于定义厚的左边框。

   示例 3：

     
   
       
         DOM Style BorderLeftWidth
       
     
       
           .elem {
               padding: 10px;
               border-style: solid;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
         GeeksforGeeks is a computer science
         portal with a huge variety of well
         written and explained computer science
         and programming articles, quizzes 
         and interview questions.
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = 'thick';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

4. length：这用于根据长度单位定义左边框宽度。

   示例 4：

     
   
       
         DOM Style BorderLeftWidth
       
     
       
           .elem {
               padding: 10px;
               border-style: solid;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
         GeeksforGeeks is a computer science portal
         with a huge variety of well written and 
         explained computer science and programming
         articles, quizzes and interview questions.
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = '10px';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

5. 初始值：用于将此属性设置为其默认值。

   示例 5：

     
   
       
         DOM Style BorderLeftWidth
       
     
       
           .elem {
               padding: 10px;
               border-style: solid;
               border-left-width: 15px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
           GeeksforGeeks is a computer science portal
         with a huge variety of well written and explained
         computer science and programming articles, quizzes
         and interview questions.
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = 'initial';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

6. 继承：这从其父级继承属性。

   示例 6：

     
   
       
         DOM Style BorderLeftWidth
       
     
       
           #parent {
               padding: 10px;
               border-style: solid;
               border-left-width: 15px;
           }
             
           .elem {
               padding: 10px;
               border-style: solid;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderLeftWidth
       
       
       
       
           
               GeeksforGeeks is a computer science
             portal with a huge variety of well
             written and explained computer science
             and programming articles, quizzes and
             interview questions.
           
       
       
       
         Change BorderLeftWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderLeftWidth = 'inherit';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

   支持的浏览器： borderLeftWidth属性支持的浏览器如下：

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