HTMLDOMスタイルフィルタープロパティ
HTML DOMスタイルフィルタープロパティは、要素の視覚効果を定義するために使用されます。
以下は、-
の構文です。フィルタプロパティの設定-
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
上記のプロパティ値は次のように説明されます-
| フィルター | 説明 |
|---|---|
| blur（px） | |
| 明るさ（％） | |
| コントラスト（％） | |
| ドロップシャドウ（h-shadowv-シャドウブラースプレッドカラー） | |
| グレースケール（％） | 画像をグレースケールに変換します。0％は元の画像を表し、100％は完全に灰色になります。 |
| hue-rotate（deg） | |
| invert（％） | |
| 不透明度（％） | 0％（完全に透明）から100％（元の画像とデフォルト値）の範囲の画像の不透明度レベルを設定します。 |
| 飽和（％） | |
| 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="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> 出力
「フィルターの変更」をクリックすると 」ボタン-
-
HTMLDOMスタイルborderImageSliceプロパティ
HTML DOM borderImageSliceプロパティは、境界線画像を領域に分割する方法を定義するために使用されます。これは、境界画像のオフセットをパーセンテージ、数値、またはグローバル値で指定することによって行われます。 以下は、-の構文です。 borderImageSliceプロパティの設定- object.style.borderImageSlice = "number|%|fill|initial|inherit" 上記の特性は次のように説明されます- 値 説明 番号 ラスター画像のピクセルまたはベクトル画像のベクトル座標を示すために使用されま
-
HTMLDOMスタイルlistStyleImageプロパティ
HTML DOMスタイルのlistStyleImageプロパティは、画像をリストアイテムマーカーとして設定または返すために使用されます。 以下は、-の構文です。 listStyleImageプロパティの設定- object.style.listStyleImage = "none|url|initial|inherit" 上記の特性は次のように説明されます- 値 説明 なし これはデフォルト値であり、画像は表示されません。 url 画像パスを指定します。 初期 このプロパティを初期値に設定します。 継承 親