14

我正在处理的此页面上的 HTML 标记位于一个类中，该类为其提供padding了28px. 当单击按钮时，我需要它暂时消失，但似乎我无法更改 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 打印页面，但我宁愿不使用任何 3rd 方代码，因为这是用于 Wordpress 的插件，我不想要十亿个依赖项。我只需要隐藏/重新显示 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正确修改属性以删除“no-top-padding”类的更安全的方法。

于 2012-12-10T23:39:06.297 回答