Question

注意：下面有一个更新。我可能会更改说明，因为它不是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;
},

其中＆＃34;属性＆＃34;是一个名字数组，我有兴趣获取计算的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'],

我似乎唯一的问题是＆＃34; backgroundColor＆＃34;。

如果我传入一个＆＃34; elem＆＃34; h1和：

如果我设置＆＃34; h1＆＃34; style =＆＃34; background-color：rgb（238,238,238）;＆＃34; 在IE 11，Chrome，Firefox

中正确返回计算出的背景颜色

但是如果我设置＆＃34; h1＆＃34; CSS中的样式如下：

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

仅IE 中的计算背景颜色将返回透明状态。 Chrome和Firefox没有他的问题。

在该样本中更奇怪，＆＃34;属性＆＃34;还包含边框的条目，如borderTopColor，并且在包括IE在内的所有浏览器中使用该代码正确计算。

有问题的页面在这里：

http://www.cloudformatter.com/CSS2Pdf

选择＆＃34; Out PDF＆＃34;时会运行代码。按钮。

如果您使用Chrome格式化，请＆＃34; h1＆＃34;在生成的PDF页面的顶部将具有银色背景，因为背景颜色在getComputedStyle中被拾取。边境也将在那里。但是如果你在IE11中格式化，背景颜色将会丢失，因为它返回为＆＃34;透明＆＃34;但边界将在那里，并且这两个都在css中设置。

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

＆＃34;例外＆＃34;框在css中是100％。边框有效，但颜色和图像不会丢失。字体颜色也缺失，因为它在CSS中设置...但不会忽略CSS中的所有内容。我甚至添加了几个控制台写（左边是IE，右边是Chrome）。

在上面的代码中，到目前为止我已经尝试了这个，IE返回＆＃34;透明＆＃34;对于背景颜色BUT返回正确的边框颜色：

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文件在远程服务器上是＆＃34; bootstrap.min.css＆＃34;并且在其中埋没了CSS规则，如无背景，全黑文本等。

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

随着IE的出现，它看起来很低，它支持它。它从远程CSS读取值而不会出现故障或安全警告。正因为如此，来自＆＃34; bootstrap.min.css＆＃34;做所有的东西都被应用了。

所以，为了解决所有浏览器的问题，我只需要遵循这里的建议：

Accessing cross-domain style sheet with .cssRules

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

Answer 1

为了解决此问题，您可以检查上述问题以进行更新。

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

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

因此，访问远程托管的CSS样式表作为对象现在不需要任何Internet Explorer（它可以不做任何更改）但在Chrome和Firefox中需要一个不同的东西（比如设置crossorigin =＆＃34;匿名＆＃34;在链接标签上。）

将getComputedStyle与IE 11

1 个答案: