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


HTML Style borderLeftWidth用法及代码示例

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

用法:

  • 获取borderLeftWidth属性
    object.style.borderLeftWidth
  • 设置borderLeftWidth属性
    object.style.borderLeftWidth = "thin | medium | thick | length |
    initial | inherit"

属性值:


  1. thin:这用于定义细边框。

    示例1:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
      
        <style> 
            .elem { 
                padding:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <p class="elem"> 
            GeeksforGeeks is a computer science 
          portal with a huge variety of well written and 
          explained computer science and programming 
          articles, quizzes and interview questions. 
        </p> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = 'thin'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    thin-before

    单击按钮后:

    thin-after

  2. medium:这用于定义中间的左边框。这是默认值。

    示例2:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
        <style> 
            .elem { 
                padding:10px; 
                border-style:solid; 
                border-left-width:thin; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <p class="elem"> 
            GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer  
          science and programming articles,  
          quizzes and interview questions. 
        </p> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = 'medium'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    medium-before


    单击按钮后:

    medium-after

  3. thick:这用于定义粗的左边框。

    示例3:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
      
        <style> 
            .elem { 
                padding:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <p class="elem"> 
          GeeksforGeeks is a computer science 
          portal with a huge variety of well 
          written and explained computer science 
          and programming articles, quizzes  
          and interview questions. 
        </p> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = 'thick'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    thick-before

    单击按钮后:

    thick-after

  4. length:这用于以长度单位定义左边框宽度。

    示例4:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
      
        <style> 
            .elem { 
                padding:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <p class="elem"> 
          GeeksforGeeks is a computer science portal 
          with a huge variety of well written and  
          explained computer science and programming 
          articles, quizzes and interview questions. 
        </p> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = '10px'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:


    在单击按钮之前:

    length-before

    单击按钮后:

    length-after

  5. initial:这用于将此属性设置为其默认值。

    示例5:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
      
        <style> 
            .elem { 
                padding:10px; 
                border-style:solid; 
                border-left-width:15px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <p class="elem"> 
            GeeksforGeeks is a computer science portal 
          with a huge variety of well written and explained 
          computer science and programming articles, quizzes 
          and interview questions. 
        </p> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = 'initial'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    initial-before

    单击按钮后:

    initial-after


  6. inherit:这将从其父项继承该属性。

    示例6:

    <!DOCTYPE html> 
    <html lang="en"> 
      
    <head> 
        <title> 
          DOM Style BorderLeftWidth 
        </title> 
      
        <style> 
            #parent { 
                padding:10px; 
                border-style:solid; 
                border-left-width:15px; 
            } 
              
            .elem { 
                padding:10px; 
                border-style:solid; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green"> 
          GeeksforGeeks 
        </h1> 
        <b> 
          DOM Style BorderLeftWidth 
        </b> 
        <br> 
        <br> 
        <div id="parent"> 
            <p class="elem"> 
                GeeksforGeeks is a computer science 
              portal with a huge variety of well 
              written and explained computer science 
              and programming articles, quizzes and 
              interview questions. 
            </p> 
        </div> 
        <br> 
        <button onclick="changeWidth()"> 
          Change BorderLeftWidth 
        </button> 
      
        <!-- Script to change BorderLeftWidth -->
        <script> 
            function changeWidth() { 
                elem = document.querySelector('.elem'); 
                elem.style.borderLeftWidth = 'inherit'; 
            } 
        </script> 
    </body> 
      
    </html>

    输出:

    在单击按钮之前:

    inherit-before

    单击按钮后:

    inherit-after

  7. 支持的浏览器:borderLeftWidth属性支持的浏览器如下:

  • 谷歌浏览器
  • IE浏览器
  • Firefox
  • Opera
  • 苹果Safari


相关用法

注:本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 HTML | DOM Style borderLeftWidth Property。非经特殊声明,原始代码版权归原作者所有,本译文的传播和使用请遵循“署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)”协议。