在IE 11中使用getComputedStyle

Question

注意:此更新如下.我可能会更改描述,因为它不是getComputedStyle问题,实际上是打印媒体的问题,而且Internet Explorer现在支持document.styleSheets [].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;
},

其中"attributes"是一个名称数组,我有兴趣获取计算的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

选择"Out 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才能应用所有这些东西.

因此,为了解决所有浏览器的问题,我只需要遵循以下建议:

使用.cssRules访问跨域样式表

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

Answer 1

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

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

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

因此，现在将远程托管的 CSS 样式表作为对象进行访问不需要使用 Internet Explorer 进行任何操作（无需任何更改即可工作），但在 Chrome 和 Firefox 中确实需要进行一些不同的操作（例如在链接标记上设置 crossorigin="anonymous"） 。