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

如何动态添加

！重要信息

是否适用于所有CSS属性

例如，在我的

部分中，我有：

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

.文本中心{
文本对齐：居中；
}
.左文本{
文本对齐：左对齐；
}
.主货柜{
边框：3倍纯黄色；
填充：10px 5px；
保证金：3倍；
}    

我需要：

<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>

.文本中心{
文本对齐：居中！重要；
}
.左文本{
文本对齐：左！重要；
}
.主货柜{
边框：3件纯色黄色！重要；
填充：10px 5px！重要；
保证金：3倍！重要；
}    

---

我试图使用，但我必须为这个方法提供我想要获得计算样式的元素。就我而言，我无法提供这些元素。

我在Chrome和Firefox中的打印（css样式）方面遇到了问题。。 甚至添加-webkit打印颜色调整：精确！重要的在我的情况下不起作用

直到我发现这种风格需要有！重要属性。使用WYSWYG编辑器时，这可能是打印的问题。所以我需要补充！对每个元素中的每个css样式属性都很重要

下面是我如何使用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);
            }
        }
    });
}

下面是添加代码破解前后打印预览的结果

---

熊猫数据帧样式器遇到了这个问题。它生成了一个带有所有样式信息的

标记元素。但是样式被链接的css文件覆盖

因此，我的解决方案是替换所有

与
一起使用！重要的使用JavaScript

CSS:

您可以根据需要调整替换规则。
否！不不永远不要这样做！请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。就目前编写的内容而言，很难说清楚您真正想要实现什么。@Paulie_D，我需要一些JS函数，可以从
部分的属性
中获取所有样式，并添加到所有CSS规则
！重要信息
。我有一些页面，在
中有很多CSS。我必须在所有这些规则中添加
！重要信息
。我希望你能理解我。我知道你想要什么……我是说这不是个好主意。告诉我们你为什么需要这样做。我想用实时预览创建一些“添加额外CSS”功能，比如jsbin或plunker。我需要将这个额外的CSS添加到某个“实时”小部件中，该小部件有自己的带有
的CSS规则！重要信息
。当页面加载时，样式被注入JS。所以，当用户想要添加自己的CSS时，他会将它们写入
textarea
，我会“听”它。然后我将带有用户输入的
添加到
部分。但它不会起作用，因为以前的CSS规则非常重要。因此，用户必须添加
！重要信息
到他的自定义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>

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