javascript - GetComputedStyle 到屏幕以外的其他媒体

Question

@media screen{    
    a {color:green}
}

@media print{
    a {color:red}
}

有没有一种方法可以使用 JavaScript 在打印时获取“A”元素的颜色？ 普通的 getComputedStyle 仅适用于 screen 媒体。

我不想读取样式元素。我需要计算样式。

Answer 1

我开发了一个解决方案，如何删除 PRINT 媒体的所有样式。 这样打印样式将与 SCREEN 样式相同。

这使打印机的打印效果与屏幕上显示的完全一样。

console.debug('styleSheetsLength')
                $('link[media=print]').remove()
                $('link[media*=screen]').attr('media','print,screen')
                for (var x=0; x<document.styleSheets.length;x++){
                    console.groupCollapsed('styleSheet-' + x,document.styleSheets[x])
                    if(document.styleSheets[x].rules){
                        for (var i=0; i<document.styleSheets[x].rules.length;i++) {
                            console.groupCollapsed('rule-(' + x + ')-' +i +  document.styleSheets[x].rules[i])
                            console.debug(document.styleSheets[x].rules[i])
                            if(document.styleSheets[x].rules[i].media){
                                for(var j=0;j<document.styleSheets[x].rules[i].media.length;j++){
                                    if (document.styleSheets[x].rules[i].media[j].indexOf('print')>-1)
                                        document.styleSheets[x].rules[i].media.mediaText='nothing'
                                    if (document.styleSheets[x].rules[i].media[j].indexOf('screen')>-1)
                                        document.styleSheets[x].rules[i].media.mediaText='print,screen'
                                }
                            }
                            console.groupEnd();
                        }
                    }
                    console.groupEnd()
                }