DOM樣式的borderLeftWidth屬性用於設置或返回元素左邊框的寬度。
用法:
- 獲取borderLeftWidth屬性
object.style.borderLeftWidth
- 設置borderLeftWidth屬性
object.style.borderLeftWidth = "thin | medium | thick | length | initial | inherit"
屬性值:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
- 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>
輸出:
在單擊按鈕之前:
單擊按鈕後:
支持的瀏覽器:borderLeftWidth屬性支持的瀏覽器如下:
- 穀歌瀏覽器
- IE瀏覽器
- Firefox
- Opera
- 蘋果Safari
相關用法
- HTML Style top用法及代碼示例
- HTML Style right用法及代碼示例
- HTML Style textAlign用法及代碼示例
- HTML Style wordSpacing用法及代碼示例
- HTML Style borderLeft用法及代碼示例
- HTML Style borderRight用法及代碼示例
- HTML Style height用法及代碼示例
- HTML Style whiteSpace用法及代碼示例
- HTML Style opacity用法及代碼示例
- HTML Style textDecorationLine用法及代碼示例
- HTML Style columnRuleStyle用法及代碼示例
- HTML Style display用法及代碼示例
- HTML Style transformStyle用法及代碼示例
- HTML Style visibility用法及代碼示例
- HTML Style animationDirection用法及代碼示例
注:本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 HTML | DOM Style borderLeftWidth Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。