HTML - DOM Style 物件 filter 屬性

HTML DOM Style 物件**filter**屬性向影像新增濾鏡或視覺效果。

語法

設定 filter 屬性

object.style.filter= "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()";

獲取 filter 屬性

object.style.filter;

濾鏡函式

濾鏡	描述
none	它不設定任何濾鏡值。
blur(px)	它對影像應用模糊效果。
brightness(%)	它調整影像的亮度。它接受 0%-100% 或 0-1 的值，其中 1 表示原始影像，0 使影像變暗。大於 1 的值使影像更亮。
contrast(%)	它調整影像的對比度。它接受 0%-100% 或 0-1 的值，其中 1 表示原始影像，0 使影像變暗。大於 1 的值使影像對比度降低。
drop-shadow	它對影像應用陰影效果。它接受兩個必需引數和三個可選引數。 h-shadow:這是一個必需引數，它設定水平陰影。對於負值，陰影出現在左側。 v-shadow:這是一個必需引數，它設定垂直陰影。對於負值，陰影出現在影像上方。 blur:這是一個可選引數，它設定影像的模糊效果。 spread:這是一個可選引數，它設定陰影擴充套件範圍，正值使陰影變大，負值使陰影變小。 color:它設定陰影顏色。
grayscale(%)	它將影像設定為灰度。它接受 0%-100% 或 0-1 的值，其中 0 表示原始影像，1 使影像完全變為灰色。
hue-rotate(deg)	它對影像應用色相旋轉。它接受 0deg 到 360deg 的值，其中 0deg 表示原始影像。
invert(%)	它反轉樣本影像。它接受 0%-100% 或 0-1 的值，其中 0 表示原始影像，1 表示完全反轉的影像。
opacity(%)	它設定影像的不透明度級別。它接受 0%-100% 或 0-1 的值，其中 0 表示完全透明，1 表示原始影像。
saturate(%)	它使影像飽和。它接受 0%-100% 或 0-1 的值，其中 0 表示完全不飽和的影像，1 表示原始影像。
sepia(%)	它將影像設定為棕褐色。它接受 0%-100% 或 0-1 的值，其中 0 表示原始影像，1 表示完全棕褐色的影像。

返回值

它返回應用了濾鏡的影像。

HTML DOM Style 物件“filter”屬性示例

以下示例說明了不同的 filter 屬性值。

將 filter 值設定為“blur”、“brightness”和“none”

以下示例將模糊、無和亮度濾鏡應用於影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Blur Effect</button>
    <button onclick="funTwo()">Brightness Effect</button>
    <button onclick="funThree()">None</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "blur(2px)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "brightness(0.5)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "none";
        }
    </script>
</body>
</html>

將 filter 值設定為“contrast”、“drop-shadow”和“grayscale”

以下示例將對比度、陰影和灰度濾鏡應用於影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Contrast Effect</button>
    <button onclick="funTwo()">Drop-Shadow Effect</button>
    <button onclick="funThree()">Grayscale Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "contrast(0)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "drop-shadow(5px 5px aqua)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "grayscale(1)";
        }
    </script>
</body>
</html>

將 filter 值設定為“invert”、“hue-rotate”和“opacity”

以下示例將反轉、色相旋轉和不透明度濾鏡應用於影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Hue-Rotate Effect</button>
    <button onclick="funTwo()">Invert Effect</button>
    <button onclick="funThree()">Opacity Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "hue-rotate(180deg)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "invert(0.5)";
        }
        function funThree() {
            document.getElementById("filter")
                .style.filter = "opacity(20%)";
        }
    </script>
</body>
</html>

將 filter 值設定為“saturate”和“sepia”

以下示例將飽和度和棕褐色濾鏡應用於影像。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object filter Property
    </title>
</head>
<body>
    <p>Click to apply different filters.</p>
    <button onclick="fun()">Saturation Effect</button>
    <button onclick="funTwo()">Sepia Effect</button>
    <br>
    <img src="/html/images/test.png" id="filter">
    <script>
        function fun() {
            document.getElementById("filter")
                .style.filter = "saturate(0)";
        }
        function funTwo() {
            document.getElementById("filter")
                .style.filter = "sepia(1)";
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
filter	是 53	是 12	是 35	是 9.1	是 40

html_dom_style_object_reference.htm

列印頁面