home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM สไตล์ borderImageSource คุณสมบัติ

คุณสมบัติ HTML DOM borderImageSource ใช้สำหรับการตั้งค่าหรือส่งคืนแหล่งที่มาของรูปภาพเพื่อใช้เป็นรูปภาพเส้นขอบสำหรับองค์ประกอบ

ต่อไปนี้เป็นไวยากรณ์สำหรับ −

การตั้งค่าคุณสมบัติ borderImageSource -

object.style.borderImageSource = "none|image|initial|inherit"

อธิบายคุณสมบัติข้างต้นดังนี้ −

ค่า คำอธิบาย
ไม่มี หมายความว่าจะไม่มีการใช้รูปภาพใดๆ จะใช้สไตล์เส้นขอบหากมีการระบุไว้
รูปภาพ สำหรับกำหนดเส้นทางของภาพเพื่อใช้เป็นเส้นขอบ
เส้นทางไปยังภาพที่จะใช้เป็นเส้นขอบ
ป่วย ใช้สำหรับรักษาส่วนตรงกลางของภาพขอบ
เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น
สืบทอด การสืบทอดค่าคุณสมบัติหลัก

ให้เราดูตัวอย่างคุณสมบัติ borderImageSource -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      width: 400px;
      margin: 15px;
      padding: 10px;
      border: 20px solid transparent;
      border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg");
      border-image-slice: 30;
   }
</style>
<script>
   function changeBorderImage(){
      document.getElementById("DIV1").style.borderImageSource="url('https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
      document.getElementById("Sample").innerHTML="The border image is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>

ผลลัพธ์

HTML DOM สไตล์ borderImageSource คุณสมบัติ

เมื่อคลิกที่ “เปลี่ยนรูปภาพเส้นขอบ” ปุ่ม −

HTML DOM สไตล์ borderImageSource คุณสมบัติ

ในตัวอย่างข้างต้น −

เราได้สร้าง div ที่มี id “DIV1” ที่มีการใช้สไตล์ css ที่เกี่ยวข้องและมีข้อความบางส่วนอยู่ในนั้น เราได้ระบุภาพเส้นขอบโดยใช้คุณสมบัติ border-image-source ในรูปแบบ css และระบุ URL รูปภาพเป็นค่าคุณสมบัติ -

#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.tutorialspoint.com/asp.net/images/asp.net-mini-logo.jpg ");
border-image-slice: 30;
}
<div id="DIV1">This is some sample text inside div</div>

จากนั้นเราก็สร้างปุ่ม “เปลี่ยนภาพเส้นขอบ ” ที่จะรันเมธอด changeBorderImage() เมื่อผู้ใช้คลิก -

<button onclick="changeBorderImage()">Change Border Image</button>

changeBorderImage() รับองค์ประกอบ DIV1 โดยใช้เมธอด getElementById() และรับค่าคุณสมบัติ borderImageSource จากนั้นกำหนด URL รูปภาพโดยกำหนดค่า url ในวิธี url จากนั้นจะแสดงข้อความที่ต้องการระบุการเปลี่ยนแปลงนี้ในย่อหน้าด้วย id “Sample” โดยใช้คุณสมบัติ innerHTML -

function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url(''https://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}