Question

我正在处理的此页面上的HTML标记位于一个类padding 28px的前导中。当点击一个按钮时，我需要暂时离开，但似乎我不能改变HTML标签本身的样式。

我是否需要在身体标签上使用position: relative;或类似的东西？有没有办法将CSS分配给我不知道的HTML标签？

@ Comments：

对不起，我在这里有点匆忙。这是有效的：

<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, "");

然后“添加”填充（通过有效删除类）：

classList

虽然使用DOM API className可以做得更干净。正则表达式只是一种更安全的方法，可以确保正确修改{{1}}属性以删除“无顶填充”类。

Javascript - 修改HTML标签上的CSS？

2 个答案: