"filter"属性にアクセスできない

Question

どういうわけか、イメージタグの適用フィルタ属性にアクセスできません。フィルタ属性を設定するページがあります。すなわち輝度を200％に設定し、画像フィルタ輝度を200％に設定する。

入力/設定フィルタ値を読み取るためのJavaScriptコードです。 CSSの場合：

img { filter: blur(var(--blur)) grayscale(var(--grayscale)) brightness(var(--brightness)) contrast(var(--contrast)) hue-rotate(var(--hue)) invert(var(--inv)) opacity(var(--opa)) saturate(var(--sat)) sepia(var(--sepia)); } 

すべて動作します。私が入力すると画像が変わります。しかし、どういうわけか、私はスタイル属性を一切読むことができません。

console.log(document.querySelector("img").style.filter); 

または.style

私はこれを行うと、それはnull（何を）示していない... htmlファイル（で唯一のimgタグ）があります。なぜ私はフィルタ属性を読み取ることができないのだろうか。

Answer 1

これは、styleプロパティが、HTMLタグのstyle属性のインラインスタイルのみを表示し、CSSはスタイルシートや<style>タグでは表示されないためです。

スタイルシートから与えられたスタイルを得るために、あなたはwindow.getComputedStyleを使用する必要があります。

window.getComputedStyle(document.querySelector("img")).filter