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属性中显示内联样式，而不是来自任何样式表或<style>标记的CSS。

为了获得样式表中给出的样式，您必须使用window.getComputedStyle：

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

无法访问＆＃34;过滤＆＃34;属性

1 个答案: