Javascript - 修改 HTML 标签上的 CSS？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13809178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - modify CSS on HTML tag?
提问by ITS Alaska
The HTML tag on this page I'm working on is in a class that is giving it a top paddingof 28px. 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标签是被赋予它的顶部一类padding的28px。当单击按钮时，我需要它暂时消失，但我似乎无法更改 HTML 标记本身的样式。
Will I need to use 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?
我需要position: relative;在 body 标签或类似的东西上使用吗？真的有一种方法可以将 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. I only need to hide/re-display 3 divs and (re)change 2 styles.
我真的希望它消失，所以我可以用 Javascript 打印页面，但我宁愿不使用任何 3rd 方代码，因为这是用于 Wordpress 的插件，我不想要十亿个依赖项。我只需要隐藏/重新显示 3 个 div 并（重新）更改 2 个样式。
回答by KatieK
Use this to remove the top padding:
使用它来删除顶部填充：
document.documentElement.style.paddingTop = "0";
and this to set it back:
这将它设置回来：
document.documentElement.style.paddingTop = "28px";
回答by Ian
There's no reason to use getElementsByTagNameand whatnot...just use 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 28pxto 20pxin your CSS? Then you have to change it somewhere else. Since you are sureyou want the top-paddingto be 0, then add a class that sets that. When done, remove that class. Like this:
没有理由使用getElementsByTagName和诸如此类的...只是使用document.documentElement。此外，最好使用一个类并切换它，而不是直接设置样式属性。如果在 CSS 中更改28pxto 会20px怎样？然后你必须在其他地方改变它。既然您确定想要top-padding成为0，那么添加一个设置它的类。完成后，删除该类。像这样：
<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. The regex is just a safer way for making sure the classNameproperty is modified correctly to remove the "no-top-padding" class.
尽管使用 DOM API 可以做得更干净classList。正则表达式只是确保className正确修改属性以删除“无顶部填充”类的更安全方法。
