HTML | DOM 样式 borderTopWidth 属性

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

句法：

• 获取 borderTopWidth 属性

  object.style.borderTopWidth

• 设置 borderTopWidth 属性

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

属性值：

1. 薄：这用于定义一个薄的顶部边框。

   例子：

     
   
       
         DOM Style BorderTopWidth
       
     
       
           .elem {
               border-style: solid;
               padding: 10px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderTopWidth
       
       
         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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = 'thin';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

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

   例子：

     
   
       
         DOM Style BorderTopWidth
       
       
           .elem {
               border: thick solid;
               padding: 10px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderTopWidth
     
       
         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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = 'medium';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

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

   示例 3：

     
   
       
         DOM Style BorderTopWidth
       
     
       
           .elem {
               border-style: solid;
               padding: 10px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderTopWidth
     
       
         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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = 'thick';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

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

   示例 4：

     
   
       
         DOM Style BorderTopWidth
       
     
       
           .elem {
               border-style: solid;
               padding: 10px;
           }
       
   
     
   
       
         GeeksforGeeks
     
       
         DOM Style BorderTopWidth
       
       
         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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = '10px';
           }
       
   
     

   输出：

   点击按钮前：
   

   点击按钮后：
   

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

   示例 5：

     
   
       
         DOM Style BorderTopWidth
       
     
       
           .elem {
               border-style: solid;
               padding: 10px;
               border-top-width: 2px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderTopWidth
       
       
         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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = 'initial';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

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

   示例 6：

     
   
       
         DOM Style BorderTopWidth
       
     
       
           #parent {
               padding: 10px;
               border-style: solid;
               /* Setting the borderTopWidth
                of the parent */
               border-top-width: 15px;
           }
             
           .elem {
               border-style: solid;
               padding: 10px;
           }
       
   
     
   
       
         GeeksforGeeks
       
       
         DOM Style BorderTopWidth
       
       
       
       
           
             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 borderTopWidth
       
     
       
       
           function changeWidth() {
               elem = document.querySelector('.elem');
               elem.style.borderTopWidth = 'inherit';
           }
       
   
     

   输出：

   点击按钮前：

   

   点击按钮后：

   

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

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