คุณสมบัติ HTML DOM borderTopStyle ใช้สำหรับการตั้งค่าหรือส่งคืนสไตล์เส้นขอบด้านบนสำหรับองค์ประกอบ
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderTopStyle -
object.style.borderTopStyle = value
อธิบายคุณสมบัติข้างต้นดังนี้ −
ค่า | คำอธิบาย |
---|---|
ไม่มี | เป็นค่าเริ่มต้นที่ระบุไม่มีเส้นขอบ |
ซ่อนอยู่ | สิ่งนี้เหมือนกับ "ไม่มี" แต่จะยังคงใช้พื้นที่ชายแดน โดยทั่วไปจะโปร่งใส แต่ก็ยังอยู่ที่นั่น |
จุด | สิ่งนี้กำหนดเส้นขอบประ |
ประชด | กำหนดเส้นประ |
แข็ง | สิ่งนี้กำหนดเส้นขอบทึบ |
ดับเบิ้ล | สิ่งนี้กำหนดเส้นขอบคู่ |
ร่อง | สิ่งนี้กำหนดเส้นขอบของร่อง 3 มิติและอยู่ตรงข้ามกับสันเขา |
ริดจ์ | สิ่งนี้กำหนดเส้นขอบแบบ 3 มิติและตรงข้ามกับร่อง |
สิ่งที่ใส่เข้าไป | สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนเป็นลายนูน มันสร้างเอฟเฟกต์ที่ตรงกันข้ามกับสิ่งที่ใส่เข้าไป |
เริ่มต้น | สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนเป็นลายนูน มันสร้างเอฟเฟกต์ที่ตรงกันข้ามกับสิ่งที่ใส่เข้าไป |
เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างสำหรับคุณสมบัติ borderTopStyle ลบ;
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #DIV1{ width:300px; height:100px; border-top: 8px solid dodgerblue; border-top-style: groove; } </style> <script> function changeTopStyle(){ document.getElementById("DIV1").style.borderTopStyle="dashed"; document.getElementById("Sample").innerHTML="The Top border style is now changed"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>Change the above div Top border style by clicking the below button</p> <button onclick="changeTopStyle()">Change Top Style</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนรูปแบบยอดนิยม ปุ่ม −
ในตัวอย่างข้างต้น −
ขั้นแรกเราได้สร้าง div ด้วย id “DIV1” และใช้สไตล์ CSS กับมันตาม id สไตล์ประกอบด้วยสไตล์ขอบด้านบนและความกว้างเป็นหลัก -
#DIV1{ width:300px; height:100px; border-top: 8px solid dodgerblue; border-top-style: groove; } <div id="DIV1">SOME SAMPLE TEXT</div>
จากนั้นเราก็สร้างปุ่ม “เปลี่ยนรูปแบบยอดนิยม” ที่จะรันเมธอด changeTopStyle() เมื่อผู้ใช้คลิก -
<button onclick="changeTopStyle()">Change Top Style</button>
เมธอด changeTopStyle() รับองค์ประกอบ div ที่มี id “DIV1” โดยใช้ getElementById() และตั้งค่าคุณสมบัติสไตล์ borderTopStyle เป็นเส้นประ การเปลี่ยนแปลงนี้จะมีผลในย่อหน้าที่มีรหัส “ตัวอย่าง” โดยแสดงข้อความที่กำหนดโดยใช้คุณสมบัติ innerHTML
function changeTopStyle(){ document.getElementById("DIV1").style.borderTopStyle="dashed"; document.getElementById("Sample").innerHTML="The Top border style is now changed"; }