注意:下面有更新。我可能会更改描述，因为这不是 getComputedStyle 问题，它实际上是打印媒体的问题，而且 Internet Explorer 现在支持文档。样式表[].cssRules。

我对此感到有点困惑，因为我认为它有效，但我不确定它最近才坏掉。我正在使用我认为所有现代浏览器都支持的 getComputedStyle，但我没有得到 IE 11 的预期答案。鉴于此代码:

getRealStyle: function(elm, attributes) {
    var returnObj = {};
    var computed = getComputedStyle(elm);
    for(var i=0; i<attributes.length; i++) {
        returnObj[attributes[i]] = computed[attributes[i]];
    }
    return returnObj;
},

其中“属性”是一个名称数组，我有兴趣为其获取计算的 CSS。是这样的:

attributes: [
        'lineHeight', 
        'alignmentBaseline', 
        'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundColor',
        'baselineShift', 
        'borderTopWidth','borderTopStyle','borderTopColor', 
        'borderBottomWidth','borderBottomStyle','borderBottomColor',
        'borderLeftWidth','borderLeftStyle','borderLeftColor',
        'borderRightWidth','borderRightStyle','borderRightColor',
        'borderCollapse',             
        'clear', 'color', 
        'display', 'direction', 'dominantBaseline', 
        'fill', 'float', 
        'fontStyle', 'fontVariant', 'fontWeight', 'fontSize', 'fontFamily', 
        'height',
        'listStyleType', 'listStyleImage', 
        'marginTop', 'marginBottom', 'marginLeft', 'marginRight','orphans', 
        'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
        'pageBreakAfter', 'pageBreakBefore', 
        'stroke', 'strokeWidth',
        'strokeOpacity', 'fillOpacity',
        'tableLayout', 
        'textAlign', 'textAnchor','textDecoration', 'textIndent', 'textTransform', 'textShadow',
        'verticalAlign',
        'widows', 'width'],

我似乎遇到的唯一问题是“backgroundColor”。

如果我传入“elem”h1 并且:

如果我在“h1”上设置 style="background-color:rgb(238, 238, 238);" 计算出的背景颜色在 IE 11、Chrome、Firefox 中正确返回

如果我像这样在 CSS 中设置“h1”样式:

h1{
border-top:3px solid #111111;
background-color:rgb(238, 238, 238);
font-size:30px;
padding:3px 10px 3px 0px;
}

计算出的背景色 仅在 IE 中 返回为透明。 Chrome 和 Firefox 没有他的问题。

在该示例中更奇怪的是，“属性”还包含边框条目，例如 borderTopColor 并且 在包括 IE 在内的所有浏览器中都使用该代码正确计算。

有问题的页面在这里:

http://www.cloudformatter.com/CSS2Pdf

代码在选择“输出 PDF”按钮时运行。

如果您使用 Chrome 对其进行格式化，则生成的 PDF 中页面顶部的“h1”将具有银色背景，因为背景颜色是在 getComputedStyle 中获取的。边界顶部也将在那里。但是，如果您在 IE11 中设置格式，背景颜色将丢失，因为它返回为“透明”，但边框将在那里，并且这两个都在 css 中设置。

您可以在此处看到类似的行为 http://www.cloudformatter.com/CSS2Pdf.Demos.InlineElements

“异常”框在 css 中是 100%。边框有效，但颜色和图像没有，因为它们丢失了。字体颜色也丢失了，因为它是在 CSS 中设置的……但并不是 CSS 中的所有内容都被忽略了。我什至添加了一些控制台写入(左边是 IE，右边是 Chrome)。

在上面的代码中，到目前为止我已经尝试过了，IE 为背景颜色返回“透明”，但为边框返回正确的颜色:

getRealStyle: function(elm, attributes) {
    var returnObj = {};
    var computed = getComputedStyle(elm);
    if (elm.localName == 'h1'){
    console.log('***** ' + elm.localName + ' *****');
    console.log('BackgroundColor: ' + computed.backgroundColor);
    console.log('PropValue: ' + computed.getPropertyValue('background-color'));
    console.log('BorderTopColor: ' + computed.borderTopColor);
    }
    for(var i=0; i<attributes.length; i++) {
        returnObj[attributes[i]] = computed[attributes[i]];
    }
    return returnObj;
},

那么，我是不是遗漏了什么，或者 getComputedStyle 是否因为外部 CSS 中的某些内容而不适用于 IE 11？

更新:

几小时后，我将问题隔离为不是 getComputedStyle。事实证明，IE 正在 正常工作，而且实际上正如我们在编码中所预期的那样。其他浏览器存在我们直到现在才注意到的问题。

代码使用 document.styleSheets[].cssRules 遍历所有 CSS 并提取打印媒体指令以应用 PDF 格式。远程服务器上的那些链接的 CSS 文件之一是“bootstrap.min.css”，其中隐藏着 CSS 规则，如无背景、全黑文本等。

好吧，如果您在 Firefox 中运行代码并尝试访问 cssRules，这实际上是一个被捕获的安全错误，所以它们不会被读取。在 Chrome 上，它不会抛出任何(明显的)错误但会返回“null”。所以这些浏览器“工作”是因为这些 CSS 规则从未被阅读过。

随之而来的是 IE 和低端，看哪，它支持它。它从远程 CSS 读取值而不会出现故障或安全警告。正因为如此，来自“bootstrap.min.css”的 CSS 被应用来做所有这些事情。

因此，要为所有浏览器修复此问题，我只需要遵循此处的建议:

Accessing cross-domain style sheet with .cssRules

然后实现规则以跳过某些文件中的打印媒体(如 bootstrap.min.css)

最佳答案

为了关闭此问题，您可以检查上面的问题以进行更新。

事实证明，某些最新版本的 Internet Explorer 现在支持 document.styleSheets[]，更重要的是支持从这些样式表中提取 cssStyles，无论它们是本地托管还是远程托管。

此更改导致我们的代码开始读取远程托管的 CSS 样式，该样式之前未被读取且未被注意到，因为它实际上在 Chrome 和 Firefox 中出错。

因此，现在访问远程托管的 CSS 样式表作为一个对象不需要使用 Internet Explorer 做任何事情(无需任何更改即可工作)，但在 Chrome 和 Firefox 中需要做一些不同的事情(比如设置 crossorigin="anonymous"链接标签)。

关于javascript - 在 IE 11 中使用 getComputedStyle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30825917/