在 IE 11 中使用 getComputedStyle

Posted 2023-03-06

【中文标题】在 IE 11 中使用 getComputedStyle

【英文标题】：Using getComputedStyle with IE 11

【发布时间】：2015-08-29 19:29:45

【问题描述】：

注意：下面有更新。我可能会更改描述，因为它不是 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'],

我似乎唯一的问题是“背景颜色”。

如果我传入一个 "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 不适用于 IE 11，因为外部 CSS 中的某些东西？

更新：

几个小时后，我将问题隔离为不是 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）

【问题讨论】：

当我在 IE11 控制台中登录时，(getComputedStyle(document.getElementById('Headings')).backgroundColor) 它按预期为我返回了rgb(238, 238, 238)，所以一定有更多的故事。

我同意。我也试过了。

我的意思是@chiliNUT 有更多的故事......令人困惑的是，背景和边框之间没有区别，因为它们都是在 CSS 中设置的。上面的 javascript 正确返回边框颜色，但不返回背景颜色。

嗯....代码基本上将所选 div 中的所有内容克隆到 DOM 中，同时重新计算解析的 CSS。本质上是一种将格式化任务的当前完整样式“抓取”为 PDF 的方法。所以，在某一时刻，有两个 h1。

我现在已经隔离了问题所在。明天我会报告更多……酒太多，想不通。在应用打印媒体样式表的 JS 代码中的某处是丢失的地方。感谢@chiliNUT 强迫我做一个简单的 JSFiddle，当然，我不能破坏它。它工作完美。我向后走 Javascript 并删除了应用打印媒体的代码解决了问题（除了所有打印媒体规则中断）。

【参考方案1】：

为了解决这个问题，您可以检查上面的问题以获取更新。

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

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

因此，现在将远程托管的 CSS 样式表作为对象访问不需要任何 Internet Explorer（它无需任何更改即可工作），但在 Chrome 和 Firefox 中确实需要一些不同的东西（例如在链接标签）。