Style borderWidth คุณสมบัติ

การระบุและการใช้งาน

borderWidth คุณสมบัตินี้ตั้งค่าหรือคืนค่าความกว้างของขอบองค์ประกอบ

คุณสมบัตินี้สามารถใช้ค่าหนึ่งถึงสี่ค่า:

  • ค่าหนึ่ง ตัวอย่าง: p {border-width: thick} - ขอบทั้งสี่ของแถวนี้เป็นขอบหนา
  • สองค่า เช่น：p {border-width: thick thin} - ขอบบนและขอบล่างหนา ขอบซ้ายและขอบขวาบาง
  • สามค่า เช่น：p {border-width: thick thin medium} - ขอบบนหนา ขอบซ้ายและขอบขวาบาง ขอบล่างปานกลาง
  • สี่ค่า เช่น：p {border-width: thick thin medium 10px} - ขอบบนหนา ขอบขวาบาง ขอบล่างปานกลาง ขอบซ้าย 10px

ดูเพิ่มเติม:

ตัวอย่าง CSS:CSS ขอบเขต

คู่มือ CSS:คุณสมบัติ border-width

คู่มือ HTML DOM:คุณสมบัติ border

ตัวอย่าง

ตัวอย่าง 1

เปลี่ยนความกว้างขอบสี่ขอบขององค์ประกอบ <div>:

document.getElementById("myDiv").style.borderWidth = "thick";

ลองด้วยตัวเอง

ตัวอย่าง 2

เปลี่ยนความกว้างขอบของขอบบนและขอบล่างขององค์ประกอบ <div> ให้หนา และขอบซ้ายและขอบขวาให้บาง:

document.getElementById("myDiv").style.borderWidth = "thick thin";

ลองด้วยตัวเอง

ตัวอย่าง 3

ใช้ค่ายาวเพื่อเปลี่ยนความกว้างขอบสี่ขอบขององค์ประกอบ <div>:

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";

ลองด้วยตัวเอง

ตัวอย่าง 4

กลับค่าความกว้างขอบ <div> องค์ประกอบ:

alert(document.getElementById("myDiv").style.borderWidth);

ลองด้วยตัวเอง

รูปแบบ

กลับค่าคุณสมบัติ borderWidth:

object.style.borderWidth

ตั้งค่าคุณสมบัติ borderWidth:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
ค่า รายละเอียด
thin กำหนดขอบบาง
medium กำหนดขอบปานกลาง โดยเริ่มต้น
thick กำหนดขอบหนา
length ความกว้างขอบด้วยความยาว
initial ตั้งคุณสมบัตินี้เป็นค่าเริ่มต้นของมัน ดู initial。
inherit ทำให้คุณได้รับคุณสมบัตินี้จากตัวองค์ประกอบพ่อของเรา。ดู inherit。

รายละเอียดเทคนิค

ค่าเริ่มต้น: medium
ค่าที่กลับมา: ตัวแปรแบบข้อความ，แสดงความกว้างของขอบตัวองค์ประกอบ。
CSS รุ่น： CSS1

การสนับสนุนโปรแกรมบราวเซอร์

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน