คุณสมบัติ border ของ HTML DOM Style ใช้สำหรับรับหรือตั้งค่าคุณสมบัติขอบ (border) ขององค์ประกอบ เป็นคุณสมบัติแบบ shorthand สำหรับ border-width, border-style และ border-color
ไวยากรณ์ (Syntax)
object.style.border = "width style color|initial|inherit"
พารามิเตอร์ (Parameters)
| ลำดับ | พารามิเตอร์และคำอธิบาย |
|---|---|
| 1 | Width ตั้งค่าความกว้างของขอบ |
| 2 | Style ตั้งค่ารูปแบบของขอบ |
| 3 | Color ตั้งค่าสีของขอบ |
| 4 | Initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 5 | Inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!DOCTYPE html> <html> <head> <style>
#IMG1 {
border: 2px solid orange;
box-shadow: 2px 2px 4px 1px seagreen;
}
</style>
<script>
function changeBorder(){
document.getElementById("IMG1").style.border="4px dotted pink";
document.getElementById("Sample").innerHTML="The border for the image is now changed";
}
</script> </head>
<body>
<h2>Learn XAMARIN</h2>
<img id="IMG1" src="https://www.tutorialspoint.com/xamarin/images/xamarin-minilogo.jpg">
<p>Change the above image border clicking the below button</p>
<button onclick="changeBorder()">CHANGE BORDER</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิก CHANGE BORDER:
