-2

window.onload、、およびの前にdivのcssを変更する必要がありbody.onloadます。

<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 に答える