14

padding私が取り組んでいるこのページのHTMLタグは、トップを与えるクラスにあり28pxます。ボタンがクリックされたときに一時的に消える必要がありますが、HTMLタグ自体のスタイルを変更できるようには見えません。

ボディタグなどに使用する必要がありposition: relative;ますか？私が知らないHTMLタグにCSSを割り当てる方法は本当にありますか？

@コメント：

申し訳ありませんが、私はここで少し急いでいます。これは、次のような効果があります。

<html class='pad_my_top'>
<head>

<style type='text/css'>
    .pad_my_top{
        padding-top: 28px;
    }

    body{
        background: #000000;
    }
</style>

<script type='text/javascript'>
    function its_gone(){
        // Something here to remove padding.
        alert("It's gone. Hurray!");
        // Something to put it back.
    }
</script>

</html>
<body>

<button onClick='its_gone()'>Click me to get rid of the top padding</button>

</body>
</html>

Javascriptでページを印刷できるように、本当にそれをなくしたいのですが、これはWordpressのプラグイン用であり、10億の依存関係が必要ないため、サードパーティのコードは使用しません。3つのdivを非表示/再表示し、2つのスタイルを（再）変更するだけです。

4

2 に答える 2

32

これを使用して、上部のパディングを削除します。

document.documentElement.style.paddingTop = "0";

そしてこれを元に戻すには：

document.documentElement.style.paddingTop = "28px";
于 2012-12-10T21:43:20.250 に答える
3

使用する理由はありませんgetElementsByTagName...使用するだけdocument.documentElementです。また、スタイル属性を直接設定するのではなく、クラスを使用してそれを切り替えることをお勧めします。CSSでをに28px変更するとどうなりますか？20px次に、別の場所で変更する必要があります。になりたいと確信しtop-paddingているので0、それを設定するクラスを追加します。完了したら、そのクラスを削除します。このような：

<style type="text/css">
    .no-top-padding {
        padding: 0 !important;
    }
</style>

document.documentElement.className += " no-top-padding";

そして、パディングを「追加」するには（クラスを効果的に削除することにより）：

var old_class = document.documentElement.className;
document.documentElement.className = old_class.replace(/(?:^|\s)no-top-padding(?!\S)/g, "");

DOM APIを使用すると、はるかにクリーンに実行できますがclassList。className正規表現は、プロパティが正しく変更されて「トップパディングなし」クラスが削除されていることを確認するためのより安全な方法です。

于 2012-12-10T23:39:06.297 に答える