Каскадировать ненаследуемые свойства (например, цвет текста) к дочерним элементам на веб-странице без явного указания дочерних элементов наследовать от родительского

Question

есть ли способ каскадировать не наследуемые свойства, такие как цвет текста, к дочерним элементам на веб-странице без явного указания дочерним элементам наследоваться от родительского узла

Я пытаюсь написать небольшое приложение, которое изменяет стиль веб-страницы (например, google, msn.co.uk). Стили включают цвет, цвет фона, вводя стиль в тело, выполнив следующие действия:

document.body.style.color='green';

однако элементы в теле, которые содержали свой собственный стиль, не наследуют цвет, например элемент div со своим собственным стилем <div id="testing" style="color": blue"> по-прежнему отображается синим цветом.

В настоящее время я понимаю, что это проблема наследования, и не все свойства автоматически наследуются из родительского контейнера, и для наследования стиля необходимо изменить цвет для наследования, выполнив что-то вроде

document.getElementById('testing').style.color='inherit';

в этом случае он унаследует цвет от тела. однако в этом случае мне пришлось бы пройти через все дочерние элементы, явно указав им наследовать от родителя (я мог бы на самом деле установить эти дочерние элементы в тот же цвет, что и тело)

Полагаю, это проблема наследования, а не специфичности

Answer 1

Я не знаю, есть ли элегантный и хороший способ делать то, что вы хотите. Но: просто для удовольствия я попытался записать CSS в элемент <style>, добавленный через JS, чтобы я мог использовать селекторы CSS в объявлениях и использовать правило !important. Казалось бы, это работает (в любом случае в Chrome и Safari), но это несколько странно (но всегда немного сложно изменить стили сайта)

var overrides = document.createElement("style");
overrides.type = "text/css";
document.head.appendChild(overrides);

overrides.innerText = "body, body * { background: green !important }";

Попробуйте в консоли разработчика, и переполнение стека выглядит как день Святого Патрика!

Опять же, не проверял его вне Chrome & Safari, но он может работать для ваших нужд.