web-dev-qa-db-fra.com

Changer le style d'une classe CSS entière en utilisant javascript

Est-il possible de changer l'attribut d'une classe CSS en utilisant javascript?

<style type="text/css">
  .fool select {
    display: block;
  }
</style>

<p class="fool">
  <select id="a" onchange="changeCSS()"> ... </select>
  <select id="b" > ... </select>
  <select id="c" > ... </select>
</p>

Je souhaite modifier l’affichage: bloc à afficher: néant pour TOUS les éléments <select> après une fonction d’appel utilisateur changeCSS ().

Ça a l'air simple mais je ne trouve pas le moyen de faire ça ...

javascripthtmlcss
20
Bedo

La clé consiste à définir des règles supplémentaires pour des classes supplémentaires et à ajouter ces classes aux éléments plutôt que de réécrire les règles pour une règle de style donnée.

JS

function changeCSS() {
  var selects = document.getElementsByTagName("select");
  for(var i =0, il = selects.length;i<il;i++){
     selects[i].className += " hidden";
  }
}

CSS

.fool select.hidden, select.hidden {
   display: none;
}

Ou pour une méthode vraiment efficace (mais qui pourrait nécessiter quelques règles de style plus spécifiques aussi)

JS

function changeCSS() {
  document.getElementsByTagName("body")[0].className += " hideAllSelects"
}

CSS

body.hideAllSelects select {
   display: none;
}
13
wheresrhys

J'accède directement aux classes CSS pour ajuster la hauteur d'un groupe de divs simultanément. Voici comment je le fais:

function cssrules() {
    var rules = {};
    for (var i=0; i<document.styleSheets.length; ++i) {
        var cssRules = document.styleSheets[i].cssRules;
        for (var j=0; j<cssRules.length; ++j)
            rules[cssRules[j].selectorText] = cssRules[j];
    }
    return rules;
}

function css_getclass(name) {
    var rules = cssrules();
    if (!rules.hasOwnProperty(name))
        throw 'TODO: deal_with_notfound_case';
    return rules[name];
}

et alors vous pouvez faire quelque chose comme css_getclass('.classname').style.background="blue". Je n'ai essayé cela que sur chrome pour Windows, bonne chance avec les autres navigateurs.

13
amwinter

Vous pouvez modifier les règles de style, mais ce n'est généralement pas la meilleure décision de conception.

Pour accéder aux règles de style définies par les feuilles de style, vous accédez à la collection document.styleSheets. Chaque entrée de cette collection aura une propriété appelée cssRules ou rules en fonction du navigateur. Chacun de ceux sera une CSSRule instance. Vous pouvez modifier la règle en modifiant sa propriété cssText.

Mais encore une fois, ce n'est probablement pas la meilleure façon de résoudre le problème. Mais c'est la réponse littérale à votre question.

Le meilleur moyen de résoudre le problème consiste probablement à avoir une autre classe dans votre feuille de style qui remplace les paramètres de la règle précédente, puis à l'ajouter aux éléments select ou à leur conteneur. Ainsi, par exemple, vous pourriez avoir les règles:

.fool select {
    display: block;
}
.fool.bar select {
    display: none;
}

... et lorsque vous souhaitez masquer les sélections, ajoutez la classe "bar" au conteneur contenant la classe "fool".

Sinon, appliquez les informations de style CSS directement aux éléments.

11
T.J. Crowder

Pour obtenir le même effet, vous pouvez créer un autre style:

<style type="text/css">
  .fool select {
    display: block;
  }
  .foolnone select {
    display: none;
  }
</style>

et changez la classe de <p> en foolnone.

Sinon, vous devrez passer par chacun des enfants de <p> et changer de classe. Si c'est ce que vous voulez faire, il est probablement préférable d'utiliser une bibliothèque, telle que jquery . Avec cela, vous pouvez faire quelque chose comme:

<style>
.fool select.displaynone {
   display: none
}

$('.fool>select').toggleClass('displaynone')

Voir ce jsfiddle pour un exemple de travail:

Cela montre les deux approches ci-dessus (c’est-à-dire cacher tout le <p> et cacher chacun des <select>s.

1
icyrock.com

Vous pouvez éditer les feuilles de style, Mais je penserais que vous créez simplement une nouvelle classe. Si vous avez vraiment besoin de le faire, essayez ceci.  

    ss=document.styleSheets[0]

cssRules Sont les règles de la feuille de style

    ss.cssRules
    ss.cssRules[0]

Sélecteur pour la première règle

    ss.cssRules[0].selectorText

    ".channel > li"

Lire le style de la première règle 

    ss.cssRules[0].style

    CSS2Properties { "margin-left" → "0px"}

Changer le style 

    ss.cssRules[0].style.marginLeft="15px"

    ss.cssRules[0].style

Propriétés CSS2 {"margin-left" → "15px"}

1
Leroy Scandal

Voici comment je le ferais:

//Broken up into multiple lines for your convenience
setTimeout
(
  function()
  {
    document.getElementById('style').innerHTML = 'p.myclass{display: none}';
  }, 5000
);
<!--Should this be separated into "<head>"?-->
<style id="style"></style>

<p>After 5 seconds:</p>
<p>This text won't be hidden,</p>
<p class="myclass">But this will,</p>
<p class="myclass">And so will this.</p>

<script>
	style = document.getElementById('style');
	setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000);
</script>

0
FluorescentGreen5