Javascript - 修改HTML标签上的CSS？

Question

The HTML tag on this page I'm working on is in a class that is giving it a top padding of 28px . 我正在处理的这个页面上的HTML标签是一个类，它给它一个28px的顶部padding 。 I need this to go away temporarily when a button is clicked, but it doesn't appear that I can change the styling of the HTML tag itself. 当点击一个按钮时，我需要暂时离开，但似乎我不能改变HTML标签本身的样式。

Will I need to use position: relative; 我需要使用position: relative; on the body tag or something similar? 在身体标签或类似的东西？ Is there really a way to assign CSS to the HTML tag that I don't know about? 有没有办法将CSS分配给我不知道的HTML标记？

@ Comments: @ 评论：

Sorry, I'm in a bit of a rush here. 对不起，我在这里有点匆忙。 It's something to the effect of this: 这是有效的：

<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>

I really want it gone so I can print the page with Javascript, but I'd rather not use any 3rd party code because this is for a plugin for Wordpress and I don't want a billion dependencies. 我真的希望它消失，所以我可以用Javascript打印页面，但我宁愿不使用任何第三方代码，因为这是一个Wordpress的插件，我不想要十亿依赖。 I only need to hide/re-display 3 divs and (re)change 2 styles. 我只需要隐藏/重新显示3个div和（重新）更改2个样式。

Answer 1

Use this to remove the top padding: 使用此选项删除顶部填充：

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

and this to set it back: 并将其设置回：

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

Answer 2

There's no reason to use getElementsByTagName and whatnot...just use document.documentElement . 没有理由使用getElementsByTagName等等......只需使用document.documentElement 。 Also, it's better to use a class and toggle that instead of directly setting the style attribute. 此外，最好使用类并切换，而不是直接设置样式属性。 What if you change the 28px to 20px in your CSS? 如果您将CSS中的28px更改为20px怎么办？ Then you have to change it somewhere else. 然后你必须在其他地方改变它。 Since you are sure you want the top-padding to be 0 , then add a class that sets that. 由于您确定要将top-padding设置为0 ，因此请添加一个设置该值的类。 When done, remove that class. 完成后，删除该类。 Like this: 像这样：

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

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

And to "add" the padding back (by effectively removing the class): 然后“添加”填充（通过有效删除类）：

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

Although it could be done a lot cleaner with the DOM API classList . 虽然使用DOM API classList可以做得更干净。 The regex is just a safer way for making sure the className property is modified correctly to remove the "no-top-padding" class. 正则表达式只是一种更安全的方法，可以确保正确修改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