คุณสมบัติตัวกรอง HTML DOM Style ใช้สำหรับกำหนดเอฟเฟกต์ภาพให้กับองค์ประกอบ
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติตัวกรอง -
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
| ตัวกรอง | คำอธิบาย |
|---|---|
| ไม่มี | ไม่ระบุผลกระทบ |
| blur(px) | ใช้เอฟเฟกต์เบลอ |
| ความสว่าง(%) | การปรับความสว่างของภาพล่วงหน้า นำค่าจาก 100% (ภาพต้นฉบับ) ไปด้านบน |
| คอนทราสต์(%) | การปรับคอนทราสต์ของภาพล่วงหน้า รับค่าตั้งแต่ 0%(สีดำสนิท),100%(ภาพต้นฉบับ) และสูงกว่า 100% จะมีความเปรียบต่างน้อยกว่า.. |
| drop-shadow(h-shadowv-shadow สีกระจายเงา) | การใส่เงาให้กับรูปภาพ |
| ระดับสีเทา(%) | สำหรับการแปลงรูปภาพเป็นระดับสีเทาโดยมีค่า 0% แทนรูปภาพดั้งเดิมและ 100% ทำให้เป็นสีเทาทั้งหมด |
| hue-rotate(deg) | สำหรับการใช้การหมุนสีกับรูปภาพโดยใช้องศาที่กำหนดแอสพารามิเตอร์ ค่าเริ่มต้นคือ 0 องศาซึ่งแสดงถึงภาพต้นฉบับและสามารถสูงถึง 360deg |
| กลับด้าน (%) | การกลับค่าตัวอย่างในรูปภาพ |
| ความทึบ (%) | การฟอร์การตั้งค่าระดับความทึบสำหรับรูปภาพตั้งแต่ 0% (โปร่งใสอย่างสมบูรณ์) ถึง 100% (รูปภาพต้นฉบับและค่าเริ่มต้น) |
| อิ่มตัว(%) | ทำให้รูปภาพอิ่มตัว |
| ซีเปีย(%) | แปลงรูปภาพเป็นซีเปีย |
เรามาดูตัวอย่างคุณสมบัติของตัวกรองกัน −
ตัวอย่าง
<!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="The grayscale filter is now applied to above image";
}
</script>
</head>
<body>
<img id="one" src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics- mini-logo.jpg">
<p>Change the above image filter property by clicking the below button</p>
<button onclick="changeFilter()">Change Filter</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิก “เปลี่ยนตัวกรอง ปุ่ม −
