Javascript - modify CSS on HTML tag?

Question

The HTML tag on this page I'm working on is in a class that is giving it a top padding of 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.

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?

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

can you share code? preferably fiddle, but atleast paste the html code you need help with — karthikr
– karthikr, Commented Dec 10, 2012 at 21:03
If you really need to get rid of that padding and don't have control over it, use html { padding-top: 0 !important; }. Or in your case, create a class that you can add to the html that has padding-top: 0 !important; in it...then you can remove it when done with the button being clicked — Ian
– Ian, Commented Dec 10, 2012 at 21:04
It doesn't matter to me so long as it's put back exactly the way it was when the function is complete. — ITS Alaska
– ITS Alaska, Commented Dec 10, 2012 at 21:23
Are you sure you want to put the class on the html tag and not on the body? Guess it doesn't matter, it just seems unusual. Also it's slightly easier to access the body from javascript - document.body compared to document.getElementsByTagName('html')[0] — Stuart
– Stuart, Commented Dec 10, 2012 at 21:44

KatieK · Accepted Answer · 2012-12-11 06:40:14Z

44

Use this to remove the top padding:

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

and this to set it back:

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

edited Dec 11, 2012 at 6:40

answered Dec 10, 2012 at 21:43

KatieK

13.9k19 gold badges79 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ian · Accepted Answer · 2012-12-10 23:39:06Z

3

There's no reason to use getElementsByTagName and 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 28px to 20px in your CSS? 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. 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. The regex is just a safer way for making sure the className property is modified correctly to remove the "no-top-padding" class.

answered Dec 10, 2012 at 23:39

Ian

51k13 gold badges104 silver badges111 bronze badges

1 Comment

ITS Alaska Over a year ago

Awesome. I was hoping that there's be something a bit cleaner than getElementsByTagName, which is the whole reason I asked this question really.

Collectives™ on Stack Overflow

Javascript - modify CSS on HTML tag?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related