使用 JavaScript 更改页面的前景色和背景色答案

【问题标题】：Use JavaScript to change foreground and background color across the page使用 JavaScript 更改页面的前景色和背景色
【发布时间】：2012-01-15 00:42:25
【问题描述】：

我应该在 Android Webview 中显示 html 数据。我可以使用包装器 div 标签更改正文前景、背景颜色，但我仍然在内部样式标签中定义了颜色值。

我可以使用 JS 函数来遍历 DOM 并在加载页面后更改所有颜色和 background-color 值吗？

最初我尝试使用正则表达式替换值，但显示的数据有可能是我不想破坏的 HTML。

【问题讨论】：

您尝试过使用 JQuery 或任何 js 库吗？
JS 库可能会按照下面提到的相同方式进行操作； getElementsByTagName("*")。在所有浏览器都接受 HTML5 getElementsByClassName() 之前，没有真正干净的方法可以完成此操作。
我在 android 上使用它，因此不能使用 Jquery 或任何 JS 库。
@RaviVyas “eont”是什么意思？
@david 打错字了.. 抱歉，应该不会

标签： javascript dom colors background-color

【解决方案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>

【讨论】：

虽然我在链接上失去了颜色:)

【解决方案2】：

这是可能的。您可以通过调用 wrapper.getElementsByTagName("*") 获取包装器 div 中的所有元素（包装器是包装器元素）。根据网站的大小，这可能会很慢。

【讨论】：

【解决方案3】：

是的，你可以做一些涉及两步方法的事情，首先你使用适当的选择器（例如“getElementById()”和“getElementsByTagName()”）选择所有目标元素，然后通过样式属性设置它们的颜色。例如：

// 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；这可以大大简化第一步。

【讨论】：

我不建议 HTML5 的 getELementsByClassName() 。不过取决于你的观众。
@JeffreySweeney：啊，谢谢，我没有意识到这是 HTML5 的添加，我会完善我的答案，使其不依赖于该功能。
HTML 是任何东西，我不会意识到这些元素。
@Jeffrey 很高兴地注意到，9 年后，这些问题在我用来运行 MVC5 的浏览器中得到了解决，即 FF 和 Chrome。我使用像 elements = document.getElementsByClassName("div-diagram") 之类的 iit，然后是 for next 循环，我得到了所有动态创建的图表 div，没有别的，没问题..

【解决方案4】：

我强烈推荐使用wrapper.getElementsByTagName("*").style.backgroundColor = "purple";。考虑到您的限制，这似乎是最好的解决方案。是的，getElementsByTagName("*") 会很慢，但鉴于这将在 Android 设备上运行，我相信它可以轻松处理这个问题。

【讨论】：