Question

如何为所有CSS属性动态添加!important？

例如，在我的<head></head>部分，我有：

<style>
    .text-center {
        text-align: center;
    }
    .text-left {
        text-align: left;
    }
    .main-container {
        border: 3px solid yellow;
        padding: 10px 5px;
        margin: 3px;
    }    
</style>

我需要：

<style>
    .text-center {
        text-align: center !important;
    }
    .text-left {
        text-align: left !important;
    }
    .main-container {
        border: 3px solid yellow !important;
        padding: 10px 5px !important;
        margin: 3px !important;
    }    
</style>

我尝试使用Window.getComputedStyle()，但我必须为此方法提供我想要获取计算样式的元素。就我而言，我不能提供这些元素。

Answer 1

我在Chrome和Firefox中遇到打印问题（使用css样式）。甚至添加 -webkit-print-color-adjust：exact！important; 在我的情况下不起作用

直到我发现样式需要！important 属性。使用WYSWYG编辑器时，这可能是打印的问题。所以我需要为每个元素中的每个css样式属性添加！important。

以下是我使用jQuery解决它的方法

//add !important rule to every style found in each element
//so the browser print render the color/style also
var el = $('.content *');

if (el.length) {
    el.each(function(item) {
        var _this = $(this);
        var attr = _this.attr('style');
        var style = '';
        if (typeof attr !== typeof undefined && attr !== false) {
            if (attr.split(';').length) {
                attr.split(';').forEach(function(item) {
                    if (item.trim() != '') {
                        style += item.trim() + '!important;-webkit-print-color-adjust: exact!important;';
                    }
                });

                _this.attr('style', style);
            }
        }
    });
}

以下是添加Code Hack之前和之后打印预览的结果

Answer 2

我遇到了熊猫DataFrame Styler这个问题。它生成了带有所有样式信息的<style>标签元素。但是样式被链接的css文件覆盖。

所以我的解决方案是使用JavaScript将所有;替换为!important;

CSS：

<style  type="text/css" >
#T_195822c0_1b0f_11e9_93d2_42010a8a0003row10_col4 {
        background-color:  yellow;
    }    #T_195822c0_1b0f_11e9_93d2_42010a8a0003row73_col5 {
        background-color:  yellow;
    }    #T_195822c0_1b0f_11e9_93d2_42010a8a0003row100_col2 {
        background-color:  yellow;
    }</style>

Javascript：

var st = document.getElementsByTagName("STYLE")[0];
st.innerHTML = st.innerHTML.replace(/yellow;/g,'yellow !important;')

您可以根据需要调整替换规则。

动态添加！important对所有CSS属性都很重要

2 个答案: