javascript - 加载第 3 方脚本会完全覆盖我网站的样式

Question

当我加载页面以检查剩余的礼品卡余额（来自第 3 方脚本）时，它会覆盖我网站上的样式。下面是我的代码示例：

<div id="main" class="main">
    <div id="giftcard-balance-container" class="giftcard-balance-container">
        <div id="chockstone-loading" class="chockstone-loading">
            <p>Loading...</p>
        </div>
        <script>
            var container = document.getElementById('giftcard-balance-container');
            while (container == null) {
                setTimeout(function () {
                    container = document.getElementById('giftcard-balance-container');
                }, 100);
            }

            var addListener = function (script, callback) {
                if (callback !== null) {
                    if (script.readyState) { // IE, in¡cl. IE9
                        script.onreadystatechange = function onReadyStateChange() {
                            if (script.readyState === 'loaded' || script.readyState === 'complete') {
                                script.onreadystatechange = null;
                                callback();
                            }
                        };
                    } else {
                        script.onload = function onLoad() { // Other browsers
                            callback();
                        };
                    }
                }
            };

            var scriptLoaded = function () {
                var loading = document.getElementById('chockstone-loading');
                loading.parentNode.removeChild(loading);
            };

            try {
                var script = document.createElement('script');
                script.src = 'SCRIPT_URL_REMOVED_FOR_SECURITY_REASONS';
                container.appendChild(script);
                addListener(script, scriptLoaded);
            } catch (e) {

            }
        </script>
    </div>
</div>

有没有办法让脚本不会覆盖我目前拥有的样式？

标签： javascripthtmlcsshandlebars.js

Answer 1

Use !important in your style

Example

.your-class{
   color:#ffffff !important;
}