Невозможно получить доступ к атрибуту «фильтр»

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 (ничего) ... Существует только один IMG тег в HTML файл(). Интересно, почему я не могу прочитать атрибут фильтра.

Answer 1

Это связано с тем, что свойство style показывает только встроенные стили в атрибуте style тега HTML, а не в CSS из любых таблиц стилей или тегов <style>.

Для того, чтобы получить стиль от заданной таблицы стилей, вы должны использовать window.getComputedStyle:

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