คุณสมบัติ HTML DOM Style filter ใช้สำหรับกำหนดเอฟเฟกต์ภาพให้กับองค์ประกอบ
ไวยากรณ์ (Syntax)
การตั้งค่าคุณสมบัติ filter:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
ค่าของฟิลเตอร์ (Filter Values)
| ฟิลเตอร์ | คำอธิบาย |
|---|---|
| none | ไม่ระบุเอฟเฟกต์ใดๆ |
| blur(px) | ใช้เอฟเฟกต์เบลอ (Blur) |
| brightness(%) | ปรับความสว่างของภาพ รับค่าจาก 100% (ภาพต้นฉบับ) ขึ้นไป |
| contrast(%) | ปรับคอนทราสต์ของภาพ รับค่าตั้งแต่ 0% (สีดำทั้งหมด) 100% (ภาพต้นฉบับ) และเกิน 100% จะลดคอนทราสต์ |
| drop-shadow(h-shadow v-shadow blur spread color) | เพิ่มเงาให้กับภาพ |
| grayscale(%) | แปลงภาพเป็นสีเทา 0% = ภาพต้นฉบับ 100% = สีเทาเต็มที่ |
| hue-rotate(deg) | หมุนสีของภาพตามองศาที่กำหนด ค่าเริ่มต้น 0 องศา สูงสุด 360 องศา |
| invert(%) | กลับสีของภาพ |
| opacity(%) | ตั้งค่าความทึบของภาพ 0% (โปร่งใส) ถึง 100% (ภาพต้นฉบับ ค่าเริ่มต้น) |
| saturate(%) | ปรับความอิ่มตัวของสี |
| sepia(%) | แปลงภาพเป็นโทนเซเปีย (Sepia) |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <head> <style>
#one {
filter: hue-rotate(90deg);
}
</style> <script>
function changeFilter() {
document.getElementById("one").style.filter = "sepia(40%)";
document.getElementById("Sample").innerHTML = "ฟิลเตอร์ sepia ถูกนำไปใช้กับภาพด้านบน";
}
</script> </head> <body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg">
<p>คลิกปุ่มด้านล่างเพื่อเปลี่ยนคุณสมบัติ filter ของภาพด้านบน</p>
<button onclick="changeFilter()">เปลี่ยน Filter</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม "เปลี่ยน Filter":
