Javascript - 修改HTML標簽上的CSS？

Question

我正在處理的這個頁面上的HTML標簽是一個類，它給它一個28px的頂部padding 。 當點擊一個按鈕時，我需要暫時離開，但似乎我不能改變HTML標簽本身的樣式。

我需要使用position: relative; 在身體標簽或類似的東西？ 有沒有辦法將CSS分配給我不知道的HTML標記？

@ 評論：

對不起，我在這里有點匆忙。 這是有效的：

<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的插件，我不想要十億依賴。 我只需要隱藏/重新顯示3個div和（重新）更改2個樣式。

Answer 1

使用此選項刪除頂部填充：

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

並將其設置回：

document.documentElement.style.paddingTop = "28px";

Answer 2

沒有理由使用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屬性以刪除“no-top-padding”類。

Javascript - 修改HTML標簽上的CSS？

問題描述

2 個解決方案

解決方案1
21 已采納 2012-12-10 21:43:20

解決方案2
3 2012-12-10 23:39:06

Javascript - 修改HTML標簽上的CSS？

問題描述

2 個解決方案

解決方案1 21 已采納 2012-12-10 21:43:20

解決方案2 3 2012-12-10 23:39:06

解決方案1
21 已采納 2012-12-10 21:43:20

解決方案2
3 2012-12-10 23:39:06