javascript - 动态更改 iframe 内的元素样式

Question

我有一个 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);
                    }
                }

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

Answer 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)。