คุณสมบัติ HTML DOM borderTopColor ใช้เพื่อรับหรือตั้งค่าสีสำหรับเส้นขอบด้านบนขององค์ประกอบ
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderTopColor -
object.style.borderTopColor = "color|transparent|initial|inherit"
อธิบายคุณสมบัติข้างต้นดังนี้ −
ค่า | คำอธิบาย |
---|---|
สี | สำหรับกำหนดสีขอบด้านบน สีเริ่มต้นถูกตั้งค่าเป็นสีดำ |
โปร่งใส | ทำให้สีเส้นขอบด้านบนโปร่งใสและสามารถมองเห็นเนื้อหาพื้นฐานได้ |
เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติ borderTopColor -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #IMG1 { border-top:solid 8px; border-top-color: orange; } </style> <script> function changeBorderTop(){ document.getElementById("IMG1").style.borderTopColor="blue"; document.getElementById("Sample").innerHTML="The border top color is now changed to blue"; } </script> </head> <body> <img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150"> <p>Change the above image border top color by clicking the below button</p> <button onclick="changeBorderTop()">Change Border Color</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนสีเส้นขอบ ปุ่ม −
ในตัวอย่างข้างต้น −
เราได้สร้างองค์ประกอบรูปภาพที่มีรหัส "IMG1" ที่มีรูปแบบ css ที่ใช้อยู่ สไตล์ css ระบุรูปแบบเส้นขอบบนและสีบนสุดของเส้นขอบ
#IMG1 { border-top:solid 8px; border-top-color: orange; } <img id="IMG1" src="https://www.tutorialspoint.com/blue_prism/images/blueprism-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150 ">
จากนั้นเราก็สร้างปุ่มชื่อ “เปลี่ยนสีเส้นขอบ” ที่จะรันเมธอด changeBorderTop() เมื่อผู้ใช้คลิก -
<button onclick="changeBorderTop()">Change Border Color</button>
เมธอด changeBorderTop() รับองค์ประกอบ ที่มี id “IMG1” โดยใช้เมธอด getElementById() และตั้งค่าคุณสมบัติสไตล์ borderTopColor เป็นสีน้ำเงิน สิ่งนี้จะเปลี่ยนสีของเส้นขอบด้านบนเป็นสีน้ำเงินและแสดงการเปลี่ยนแปลงนี้ในย่อหน้าด้วย id “ตัวอย่าง” โดยใช้คุณสมบัติ innerHTML -
function changeBorderTop(){ document.getElementById("IMG1").style.borderTopColor="blue"; document.getElementById("Sample").innerHTML="The border top color is now changed to blue"; }