javascript - CSS Twitter Bootstrap 覆盖了 JavaScript 样式，因为它在脚本之后执行。最后如何执行脚本？

Question

所以我正在向父页面发送一个 iframe 发布消息。 iframe 的内容发送一 strip 有宽度和高度的 POST 消息，我在收到消息后捕获它们来更改元素的样式。但是，每当我这样做时，twitter bootstrap 都会改变元素的样式(我只能假设这是一个时间问题)。

我尝试包装消息监听器的功能，但代码永远不会执行。这是:

        window.addEventListener("message", function(event) {
            window.onload = function() {
                console.log("loaded");
                var array = event.data.split(" ");
                addStyle(document.getElementById("outer-frame-form"), 
                    ['height', 'width', 'position', 'overflow'], 
                    [array[0],array[1],'relative','hidden'], 
                    true);
            }
        });

        function addStyle(element, properties, values, important) {
            // this will be run when the whole pa
                var i;
                var cssString = "";
                for (var i=0; i<properties.length; i++)
                {
                    //remove previously defined property
                    if (element.style.setProperty)
                        element.style.setProperty(properties[i], '');
                    else
                        element.style.setAttribute(properties[i], '');

                    cssString += properties[i] + ':' + values[i] + ((important) ? ' !important' : '') + '; '
                    console.log(properties[i]);
                }

                //insert the new style with all the old rules
                element.setAttribute('style', element.style.cssText + " " + cssString);
        }

在加载所有 css 后，我还可以使用哪些其他方式来等待并执行脚本，这样 twitter bootstrap 就无法覆盖它？谢谢!

Answer 1

我认为你可能把这个复杂化了。在模板中的某个地方，您将有一个标题标签——这是加载 Bootstrap 的地方。把你的 CSS meta tag在此之下 - 它的“级联样式表”所以最后的优先