如何移除#cartDiv及其子元素的!important内联样式（含动态生成）

我在用一个设计极差的CMS/购物车系统，页面里到处嵌着内联样式。CSS能覆盖大部分样式，但硬编码的!important样式根本搞不定。

用JS的.removeAttr()方法能清理样式，但只能处理顶层元素，深层嵌套的div/span完全没效果：

$(document).ready(function() {
    $('#cartDiv').removeAttr('style');
});

这段代码能完美移除#cartDiv本身的内联样式，但子元素的样式纹丝不动。试过加多行代码、用精准选择器定位子元素，都没用。现在需要彻底移除#cartDiv及其所有子元素的内联样式。

示例HTML结构 #

<div id="cartDiv" style="top: 0; right: 0; width: 180px; text-align: center; padding: 0 5px 5px; z-index: 10;">
    <div style="display:table; height:28px; text-align:right; width:100%;"> 
        <span style="vertical-align:middle; display:table-cell; color: #ccc; font-family: Arial; font-size: 12px !important;"> 
            <a href="javascript:ProceedToCheckout('no');" style="color: #fff !important; text-decoration:underline !important; font-family: Arial !important; font-size: 12px !important; font-weight: normal !important;">Check Out</a> &nbsp; | &nbsp; <a href="checkout/cart.php?1" style="color: #fff !important; text-decoration:underline !important; font-family: Arial !important; font-size: 12px !important; font-weight: normal !important;">View Cart</a> &nbsp;&nbsp;&nbsp; </span> 
        <span style="vertical-align:middle; display:table-cell; color: #ccc; font-family: Arial; font-size: 12px !important;"> <a href="#" onclick="ExpandCart();"><img border="0" width="16" height="11" src="https://siteimages.s3.amazonaws.com/btn-expand.png"></a> </span>
    </div>  
</div>

附加信息 #

这些!important样式是页脚里的cart.js动态添加的，我没法修改这个JS文件，也没法替换页脚里的cart.js链接，得想办法覆盖这个逻辑：

原JS中生成样式的代码片段 #

// Cart - This is what renders the expanded version of the cart in the upper corner
/** @return {boolean} */
function ExpandCart() {
    var oldCart = window.cartVersion != 2017;
    var cartDiv = $("#cartDiv");
    var cartDivMobile = $("#cartDivMobile");

    var products = '';
    var subtotal = 0;
    var subtotal_to_discount = 0;
    var giftCardSubtotal = 0;
    var totalItems = 0;
    var numProducts = 0;
    var numGiftCards = 0;

    if (oldCart) {
        UpdateCouponsInCartArrayAndCookie();
    }

    // Item totals
    for (var i = window.cartArray.length - 1; i >= 0; i--) {
        var row = window.cartArray[i];
        if (row[0] == 'product') {
            if (row[1].indexOf('PITEM') > -1) {
                continue;
            }
            totalItems += Number(row[4]);
            var displayPrice = 0;
            if (row[25]) {
                displayPrice = row[25];
            } else {
                displayPrice = row[3];
            }

            var amount = Math.round((parseFloat(displayPrice) * row[4]) * 100) / 100;
            if (row.length > 16 && row[16] == 'GC') {
                giftCardSubtotal += amount;
                numGiftCards++;
            } else {
                numProducts++;
                subtotal += amount;

                // 19 - discount_eligible
                if (row[19] === "true") {
                    subtotal_to_discount += amount;
                }
            }

            if (oldCart) {
                products +=
                    '<div style="font-size: 12px !important; line-height: 20px; border-bottom: 1px solid #999; padding-bottom:5px; margin-bottom: 10px;">'
                    + '<div style="line-height: 14px; font-size: 11px !important; margin-bottom:4px;">'
                    + window.cartArray[i][2].replace(/\+/g, ' ')
                    + '</div>'
                    + '<div><b>' + formatCurrency(displayPrice) + '</b></div>'
                    + '<span style="font-size: 10px; color: #999;">quantity: ' + row[4] + '</span><br><br>'
                    + '</div>';
            }
        }
    }
}

解决方案 #

1. 一次性移除所有子元素的内联样式 #

用jQuery的选择器选中#cartDiv本身及其所有子元素，批量移除style属性：

$(document).ready(function() {
    $('#cartDiv, #cartDiv *').removeAttr('style');
});

2. 处理动态生成的样式（针对cart.js的动态渲染） #

因为cart.js会在调用ExpandCart()时动态添加带!important的样式，所以需要在这个函数执行后立刻清理样式。可以重写ExpandCart函数，在原逻辑执行完后追加清理操作：

// 保存原ExpandCart函数引用
const originalExpandCart = window.ExpandCart;

// 重写函数
window.ExpandCart = function() {
    // 执行原函数逻辑
    const result = originalExpandCart.apply(this, arguments);
    // 清理#cartDiv及其所有子元素的内联样式
    $('#cartDiv, #cartDiv *').removeAttr('style');
    // 返回原函数的返回值，避免破坏原有逻辑
    return result;
};

这样每次调用ExpandCart()生成新内容后，都会自动清除所有内联样式。

3. 备选方案：CSS强制覆盖（解决JS清理的视觉闪烁） #

如果动态生成的样式出现后有短暂的视觉闪烁，可以用CSS的!important强制覆盖所有样式，配合JS清理形成双保险：

#cartDiv, #cartDiv * {
    /* 重置所有样式为继承或默认值 */
    all: unset !important;
    /* 按需添加基础样式，避免布局混乱 */
    font-family: 你的自定义字体, sans-serif !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

注意all: unset会重置所有样式，需要手动补充必要的基础样式，比如字体、盒模型、行高等。

内容的提问来源于stack exchange，提问作者RodeoRamsey