Thuộc tính bộ lọc HTML DOM Style được sử dụng để xác định hiệu ứng hình ảnh cho một phần tử.
Sau đây là cú pháp cho -
Đặt thuộc tính bộ lọc -
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Các giá trị thuộc tính trên được giải thích như sau -
| Bộ lọc | Mô tả |
|---|---|
| không có | Không xác định hiệu ứng nào. |
| mờ (px) | Điều này áp dụng hiệu ứng làm mờ. |
| độ sáng (%) | Điều chỉnh độ sáng của hình ảnh. Có giá trị từ 100% (ảnh gốc) trở lên. |
| độ tương phản (%) | Điều chỉnh độ tương phản của hình ảnh. Có giá trị từ 0% (đen hoàn toàn), 100% (ảnh gốc) và trên 100%, nó sẽ ít tương phản hơn .. |
| drop-shadow (trải màu làm mờ h-shadowv-shadow) | Đổ bóng xuống hình ảnh. |
| thang độ xám (%) | Chuyển đổi hình ảnh sang thang độ xám với 0% thể hiện hình ảnh gốc và 100% làm cho hình ảnh hoàn toàn có màu xám. |
| hue-xoay (độ) | Đang áp dụng xoay màu cho hình ảnh với tham số đo độ đã cho. Giá trị mặc định là 0 độ đại diện cho hình ảnh gốc và có thể lên đến 360 độ. |
| invert (%) | Chuyển hướng các mẫu trong ảnh. |
| độ mờ (%) | Cài đặt mức độ mờ cho hình ảnh trong khoảng từ 0% (Hoàn toàn trung thực) đến 100% (hình ảnh gốc và giá trị mặc định). |
| bão hòa (%) | Hình ảnh vệ tinh. |
| nâu đỏ (%) | Chuyển hình ảnh sang màu nâu đỏ. |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính bộ lọc -
Ví dụ
<!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> Đầu ra
Khi nhấp vào “ Thay đổi bộ lọc Nút ”-
