Javascript - modifier le CSS sur la balise HTML?

De la balise HTML sur cette page, je suis en train de travailler sur est dans une classe qui est en lui donnant un haut padding de 28px. J'ai besoin de cela pour s'en aller temporairement quand on clique sur un bouton, mais il n'apparaît pas que je puisse changer le style de la balise HTML lui-même.

Ai-je besoin pour utiliser position: relative; sur la balise body ou quelque chose de similaire? Est-il vraiment un moyen d'affecter des CSS à la balise HTML que je ne le sais pas?

@ Commentaires:

Désolé, je suis un peu pressé ici. C'est quelque chose à l'effet de ceci:

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

Je le veux vraiment allé si je peux imprimer la page avec du Javascript, mais je préfère ne pas utiliser un 3ème partie du code parce que c'est un plugin pour WordPress, et je ne veux pas d'un milliard de dépendances. J'ai seulement besoin de masquer/afficher de nouveau 3 divs et (re)changer les 2 styles.

  • pouvez-vous partager le code? de préférence, le violon, mais au moins collez le code html vous avez besoin d'aide avec
  • Si vous avez vraiment besoin de se débarrasser de rembourrage et de ne pas avoir le contrôle sur elle, l'utiliser html { padding-top: 0 !important; }. Ou dans votre cas, créer une classe que vous pouvez ajouter à la html qui a padding-top: 0 !important; en elle...alors vous pouvez le supprimer lorsqu'il est effectué avec le bouton étant un clic
  • Voulez-vous la classe pour aller loin, ou tout simplement le rembourrage?
  • Il n'est pas question pour moi tant que c'est de remettre exactement la façon dont il a été lorsque la fonction est terminée.
  • Êtes-vous sûr que vous voulez mettre de la classe sur le html tag et pas sur le corps? Suppose que cela n'a pas d'importance, il semble tout à fait inhabituel. C'est aussi un peu plus facile d'accéder au corps de javascript document.body par rapport à document.getElementsByTagName('html')[0]
  • Ouais. C'est WordPress, donc je n'ai pas de contrôle sur les choses stupides comme ça. Croyez-moi, si je pouvais changer, je le ferais.
  • Pourquoi devez-vous utiliser? Utilisez simplement document.documentElement...
  • J'ai ajouté une réponse qui utilise des classes - le moyen le plus propre à faire. Vous n'avez pas l'aimer ou de l'accepter ou de quoi que ce soit (je sais que vous avez déjà obtenu votre "réponse"), je voulais juste donner une solution différente

InformationsquelleAutor ITS Alaska | 2012-12-10
  1. 21

    L'utiliser pour enlever la partie supérieure de rembourrage:

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

    et ce, pour la définir:

    document.documentElement.style.paddingTop = "28px";
    InformationsquelleAutor KatieK
  2. 3

    Il n'y a pas de raison d'utiliser getElementsByTagName et autres joyeusetés...il suffit d'utiliser document.documentElement. Aussi, il est préférable d'utiliser une classe à bascule et qu'au lieu de directement paramètre de l'attribut style. Que faire si vous changez le 28px à 20px dans votre CSS? Ensuite, vous avez à changer quelque part d'autre. Puisque vous êtes sûr vous voulez le top-padding être 0, puis ajouter une classe que jeux de. Lorsque vous avez terminé, retirez la classe. Comme ceci:

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

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

    Et "ajouter" le rembourrage du dos (en retrait de la classe):

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

    Bien qu'il pourrait faire beaucoup plus propre avec l'API DOM classList. La regex est juste un moyen plus sûr de s'assurer de la className propriété est correctement modifiés pour supprimer le "non-haut-remplissage" de la classe.

    • documentElement est mieux que gEBTN[0] - merci!
    • Génial. J'espérais qu'il y a du être quelque chose d'un peu plus propre que getElementsByTagName, qui est la raison pour laquelle j'ai demandé à cette question, vraiment.
    InformationsquelleAutor Ian