Javascript-修改HTML标签上的CSS？_Javascript_Css_Html

Javascript-修改HTML标签上的CSS？

javascript css html

Javascript-修改HTML标签上的CSS？,javascript,css,html,Javascript,Css,Html,我正在处理的这个页面上的HTML标记位于一个类中，该类为它提供了一个顶部填充的28px。我需要在单击一个按钮时暂时取消此功能，但似乎无法更改HTML标记本身的样式我是否需要使用position:relative在body标签上还是类似的？是否真的有一种方法可以将CSS分配给我不知道的HTML标记 @评论：对不起，我有点赶时间。这是这样的： <html class='pad_my_top'> <head> <style type='text/css'>

我正在处理的这个页面上的HTML标记位于一个类中，该类为它提供了一个顶部

填充的28px
。我需要在单击一个按钮时暂时取消此功能，但似乎无法更改HTML标记本身的样式
我是否需要使用position:relative在body标签上还是类似的？是否真的有一种方法可以将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>


.pad_my_top{
填充顶部：28px；
}
身体{
背景：#000000；
}
函数及其_gone（）{
//这里有些东西可以去掉填充物。
警惕（“它不见了，万岁！”）；
//放回去的东西。
}
单击我以除去顶部填充

我真的希望它消失，这样我就可以用Javascript打印页面，但我不想使用任何第三方代码，因为这是一个Wordpress插件，我不想要10亿个依赖项。我只需要隐藏/重新显示3个div和（重新）更改2个样式。
使用此选项删除顶部填充：
document.documentElement.style.paddingTop = "0";

这是为了让它倒退：
document.documentElement.style.paddingTop = "28px";

没有理由使用getElementsByTagName
等等…只需使用document.documentElement
。另外，最好使用一个类并切换它，而不是直接设置样式属性。如果将CSS中的28px
更改为20px
，该怎么办？那你得换个地方。既然您确定希望顶部填充为0
，那么添加一个类来设置它。完成后，删除该类。像这样：
<style type="text/css">
    .no-top-padding {
        padding: 0 !important;
    }
</style>

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

尽管使用domapiclassList
可以做得更简洁。正则表达式只是确保正确修改className
属性以删除“无顶部填充”类的更安全的方法。
您可以共享代码吗？最好是摆弄，但至少要粘贴您需要帮助的html代码如果您真的需要摆脱填充，并且无法控制它，请使用html{padding top:0！important；}
。或者在您的情况下，创建一个类，您可以将其添加到html
中，该类具有填充顶部：0！重要的在它里面…然后你可以在点击按钮后删除它。你是想让类消失，还是仅仅是填充？对我来说这并不重要，只要它完全恢复到函数完成时的状态。你确定要将类放在html
标记上，而不是放在主体上吗？我想这没关系，只是看起来很不寻常。另外，与document.getElementsByTagName（'html'）[0]
相比，从javascript-document.body访问正文稍微容易一些。我希望有比getElementsByTagName更干净的东西，这就是我问这个问题的全部原因。
var old_class = document.documentElement.className;
document.documentElement.className = old_class.replace(/(?:^|\s)no-top-padding(?!\S)/g, "");