Используйте JavaScript для изменения цвета переднего плана и фона на странице

Question

Я должен отображать HTML-данные в Android Webview. Я могу изменить основной цвет тела, цвет фона, используя тег div-оболочки, но у меня все еще есть значения цвета, определенные во внутренних тегах стиля.

Можно ли использовать функцию JS для перебора DOM и изменения всех цветов и значений background-color после загрузки страницы?

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

Answer 1

Вот пример сценария для изменения цвета фона при загрузке страницы для всех «div», которые имеют стиль фона.Подход необходим для всех других типов элементов, для которых цвет фона должен быть изменен.

<script type="text/javascript">

    window.onload = onWindowLoad();
    function onWindowLoad() {
        var divs = document.getElementsByTagName("div");
        for (i = 0; i < divs.length; i++) {
            if (divs[i].style.backgroundColor != null && divs[i].style.backgroundColor != "") {
                divs[i].style.backgroundColor = "Blue";
            }           
        }
    }
</script>

Answer 2

Это возможно. Вы можете получить все элементы внутри div-оболочки, вызывая wrapper.getElementsByTagName ("*") (обертка является элементом-оберткой). В зависимости от размера сайта это может быть медленным.

Answer 3

Я настоятельно рекомендую использовать wrapper.getElementsByTagName("*").style.backgroundColor = "purple";.Это кажется лучшим решением с учетом ваших ограничений.Да, getElementsByTagName("*") будет медленным, но, учитывая, что это будет на устройстве Android, я считаю, что это легко справится.

Answer 4

Да, вы можете сделать что-то, включающее двухэтапный подход, при котором сначала вы выбираете все целевые элементы, используя соответствующий селектор (например, "getElementById()" и "getElementsByTagName()"), а затем устанавливаете их цвета с помощью атрибута style. Например:

// Select all elements whose color must be changed.
var els = [];
els.push(document.getElementById("item1"));
els.push(document.getElementById("item2"));
els.push(document.getElementById("item3")); // And so on...

// Set their new foreground and background colors.
for (var i=0; i<els.length; i++) {
  els[i].style.color = 'black'; // New foreground color.
  els[i].style.backgroundColor = 'white'; // New background color.
}

Кроме того, рассмотрите возможность использования библиотеки JavaScript, такой как jQuery, с расширенными возможностями выбора; это может существенно упростить первый шаг.