动态更改 iframe 内的元素样式答案

【问题标题】：Changing the element style inside the iframe dynamically动态更改 iframe 内的元素样式
【发布时间】：2013-11-01 06:03:29
【问题描述】：

我有一个 iframe，里面的背景颜色应该变为黑色，主体颜色变为白色。并且从外部样式表加载的默认为黑色的所有元素也需要更改为白色。我更改正文的背景颜色和颜色的第一件事是：

    frame = document.getElementsByTagName(“iframe”);
    var D = frame.contentDocument;  
    var cwin = frame.contentWindow;
    D.body.style.backgroundColor ='black';  
    D.body.style.color = 'white';

但是具有黑色的元素会因其样式而变得不可见。所以我遍历 dom 以获取黑色的元素并将其更改为白色。但是下面的代码似乎不起作用。

var all = D.getElementsByTagName("*");
                for (var i=0, max=all.length; i < max; i++) {
                    computedStyle = cwin.getComputedStyle(all[i]);
                    var c = computedStyle.getPropertyValue("color"); 
                    if(c =='rgb(0,0,0)'){
                        all[i].style.setProperty("color", "white", null);
                    }
                }

注意：样式表是从外部加载的。我无法手动更改外部样式表，我想在运行时进行。以上代码有更好的解决方案或修改吗？

【问题讨论】：

您检查过c 实际包含的内容吗？
ya c 的值为"rgb(0, 0, 0)"
代替 setProeprty，试试.style.color="white"
它不在if 条件内。顺便说一句，我认为我在上述代码中的方法不正确，它获得了 iframe 窗口的颜色而不是特定的元素颜色。

标签： javascript html css dom iframe

【解决方案1】：

如果 c 的值为“rgb(0, 0, 0)”，则条件 c == 'rgb(0,0,0)' 将为 false，因为测试字符串比预期字符串长 2 个字符（空格）。

您可以尝试将您的线路更改为if(c =='rgb(0, 0, 0)'){。

但是，不同的浏览器可能对值“black”有不同的表示。如果您想确保始终获得相同的黑色表示 (#000, rgb(0, 0, 0))，您可以尝试将字符串标准化为固定格式，如 here 所述。

似乎还有一个更全面的颜色转换器（Stoyan 的 RGBColor.js），它在 here（原为 here）上积极工作。

【讨论】：