當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


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。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。