如何在创建元素之前更改 CSS 属性？答案

【问题标题】：How to change CSS property before element is created?如何在创建元素之前更改 CSS 属性？
【发布时间】：2012-12-28 13:10:09
【问题描述】：

我必须在window.onload和body.onload之前修改div的css。

<html>
    <head>
        <style type="text/css">
            html, body {
                width: 100%;
                height: 100%;
                padding: 0px;
                margin: 0px;
            }
            div {
                margin-left: auto;
                margin-right: auto;
            }
        <script>
            HTMLDivElement.prototype.style.marginTop = (window.innerHeight/2 - HTMLDivElement.scaleHeight/2) + "px";
        </script>
    </head>

    <body>
        <div>
        foo<br/>bar
        </div>
    </body>
</html>

【问题讨论】：

在加载之前，您不能更改 DOM 元素的样式属性。为什么不直接使用 css？
要使元素垂直居中，为什么不直接使用 display:table-cell 和 vertical-align:middle？
我认为这是一个有效的问题，在某些情况下，用户只能更改 javascript 文件，而不能更改页面的 HTML 或 CSS 文件。

标签： javascript html css

【解决方案1】：

我不知道这是否适用于所有浏览器，但您可以在 head 部分中添加一个新的 style-node，如下所示：

var marginTop = ...;
var node = document.createElement("style");
node.setAttribute("rel", "stylesheet");
node.innerHTML = "div { margin-top: " + marginTop + "px; }";
document.head.appendChild(node);

您的head 元素显然必须存在才能使其正常工作。我知道它很难看，我不推荐使用它，但我认为这是你想要的。

更新：我找到了另一种方式，我认为这更好，因为您可以使用 API：

// insert a stylesheet if you don't have one
if (document.styleSheets.length == 0) {
    document.head.appendChild(document.createElement("style"));
}

var marginTop = ...;
var rule = "div { margin-top: " + marginTop + "px; }";
document.styleSheets[0].insertRule(rule);

欲了解更多信息，您可以访问http://www.w3.org/TR/DOM-Level-2-Style/css.html 同样，我不知道是否所有浏览器都支持这个。

【讨论】：

【解决方案2】：

当元素未加载时，您将如何找到它。这必须在服务器端完成。

顺便说一句，你为什么需要这种功能？

【讨论】：

我只想让 div 垂直居中
如果您不必考虑旧版浏览器，您可以使用 flexbox 实现垂直对齐：html5rocks.com/en/tutorials/flexbox/quick

【解决方案3】：

在加载窗口之前，文档没有加载到 dom 中。

所以从记忆中.. javascript 无法编辑它。

您总是可以在 onLoad 之后对其进行编辑，并且应该不会发现有太大的不同。

例如在 jQuery 中：

<script>
(function () {
    var divHeight = ($('div').height())/2,
        windowHeight = window.innerHeight/2;

    $('div').css('margin-top', windowHeight - divHeight);
}())
</script>

【讨论】：

当然，但问题没有在任何地方提到 jQuery。
我编辑了我的答案以提及 jquery。考虑到这个问题不能用 javascript 解决，一个可以在 jquery 中解决问题的随机示例并没有脱节。
"无法用 JavaScript 解决？"那么 jQuery 是什么，神奇的精灵尘埃？
"无法用 JavaScript 解决？" - 在问题的上下文中（在加载之前）。 “那么 jQuery 是什么，魔法精灵尘埃？” - 是的，你应该尝试一下
jQuery 是 JavaScript。如果你能用 jQuery 做，你可以用纯 JS 做。