Хобрук: Ваш путь к мастерству в программировании

Инвертирование фильтра перезаписи CSS не работает в Mozilla Firefox

Пишу небольшую надстройку для фаерфокса для комфортного чтения страниц ночью. Он должен инвертировать цвета страницы, но не инвертировать изображения. Код:

document.body.style.filter = "invert(100%)";

var imgs = document.getElementsByTagName("img");

for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.removeProperty("filter"); // NOT WORKING
    imgs[i].style.filter = "invert(0%)";    // NOT WORKING EITHER
}

Проблема в том, что это не работает должным образом - изображения все еще перевернуты, но проверка элемента внутри firefox показывает, что они имеют правильный стиль инвертирования (0%).

javascript css firefox
23.09.2016

Ответы:


1

Если вы инвертируете тело, это означает, что инвертировано все его содержимое. Чтобы изображения отображались в исходных цветах, их нужно снова инвертировать, т. е. применить к ним invert(100%).

Обратите внимание, что это отличается от наследования CSS, фильтры концептуально применяются при наложении пикселей блока на его родителя, изображения находятся внутри блока <body>, поэтому они также инвертируются.

Небольшое примечание: вы можете применить его к селектору document.documentElement или :root — в большинстве случаев это узел <html> — поскольку тела могут быть меньше окна просмотра. Еще одна вещь, которую следует учитывать, это фреймы, вложенные в перевернутые документы.

23.09.2016
  • Сэр, применение инвертирования (100%) к изображениям делает то, что мне нужно! Благодарю вас! 23.09.2016
    • Новые материалы
    #093 | Моделирование вспышки эпидемии с помощью JavaScript — Часть 3
    TLDR: Я сделал симуляцию вспышки эпидемии, в которую можно поиграть здесь . Мой холст, моя сцена Мой HTML — это всего лишь один div с классом stage, и вот как я настроил на нем свой объект..
    numberToString.js (8kyu 16)
    Алгоритм кодовых войн Проблема Нам нужна функция, которая может преобразовать число в строку. 숫자를 문자열로 변환하는 함수를 작성해라. Решение 01 function numberToString(n) { return n.toString(); }..
    Лучшие практики для быстрого изучения языка программирования
    Изучение языка программирования может быть сложной задачей, но при правильном подходе определенно возможно быстро выучить язык программирования. Хорошее понимание языка программирования может..
    Использование данных из Adobe Analytics в предложениях Adobe Target
    Я уверен, что все видели эти всплывающие окна в интернет-магазинах, которые говорят что-то вроде « 15 человек просматривают этот товар прямо сейчас! » или « 105 человек из Мичигана купили это..
    Машинное обучение и его набор данных в CreateML
    Когда я впервые начал учиться в Apple Developer Academy, у меня был момент неуверенности в моем интересе к машинному обучению. Нужно ли мне сменить карьеру моей мечты с специалиста по данным на..
    Обучение требует воли
    Недавно я прочитал отличную статью Шейна Легга и Джоэла Венесса из DeepMind. http://arxiv.org/pdf/1109.5951v2.pdf В статье «универсальный интеллект» агента π определяется как: Поэтому..
    Безопасность по дизайну делает всех счастливыми
    Заложенная безопасность делает всех счастливыми Если вы никогда не смотрели Louis C.K. рассказать о том, как Все удивительно, и никто не счастлив ; побаловать себя. Сделайте это прямо..