-2

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

3 回答 3

4

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

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 我不知道是否所有浏览器都支持这一点。

于 2012-12-28T13:18:19.703 回答
0

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

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

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

例如在 jQuery 中：

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

    $('div').css('margin-top', windowHeight - divHeight);
}())
</script>
于 2012-12-28T13:13:37.100 回答
0

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

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

于 2012-12-28T13:14:32.970 回答