Question

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

    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)'){。

但是，不同的浏览器可能对值“黑色”具有不同的表示形式。如果你想确保你总是得到相同的黑色表示（＃000，rgb（0,0,0）），你可以尝试将字符串规范化为固定格式，如here所述。

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

动态更改iframe内的元素样式

1 个答案: