Cambia lo stile di un'intera classe CSS usando javascript

Question

C'è un modo per cambiare un attributo di una classe CSS usando 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> 

voglio cambiare display: block a display: none per TUTTI <select> elementi dopo una chiamata di funzione utente changeCSS().

Sembra semplice, ma non riesco a trovare un modo per fare questo ...

Answer 1

La chiave è definire regole aggiuntive per classi aggiuntive e un dd queste classi agli elementi piuttosto che riscrivere le regole per una determinata regola di stile.

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

O per un metodo davvero efficace (ma che potrebbe aver bisogno di alcune regole di stile più specifiche troppo)

JS

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

CSS

body.hideAllSelects select { 
    display: none; 
} 

Answer 2

Per ottenere lo stesso effetto, si può fare un altro stile:

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

e cambiare la classe di <p> a foolnone.

Altrimenti, dovresti passare attraverso ciascuno dei figli di <p> e cambiare classe. Se questo è il modo in cui vuoi andare, probabilmente probabilmente è meglio usare qualche libreria, come ad esempio jquery. Con esso, si può fare qualcosa di simile:

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

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

Vedere questo jsfiddle per un esempio di lavoro:

• http://jsfiddle.net/3ujau/1/

Questo dimostra entrambi gli approcci di cui sopra (cioè si nasconde tutta la <p> e nascondere ognuno di <select> s.

Answer 3

for(var elements = document.getElementsByTagName('select'), i = elements.length; i--) 
    elements[i].style.display = "none"; 

Answer 4

È possibile modificare le regole di stile, ma non è di solito la migliore decisione di progettazione.

Per accedere alle regole di stile definite dai fogli di stile, è possibile accedere alla raccolta document.styleSheets. Ogni voce in quella raccolta avrà una proprietà chiamata cssRules o rules a seconda del browser. Ciascuno di quelli sarà un'istanza CSSRule. Puoi cambiare la regola cambiando la sua proprietà cssText.

Ma ancora, probabilmente non è il modo migliore per risolvere il problema. Ma è la risposta letterale alla tua domanda.

Il modo migliore per risolvere il problema è probabilmente quello di avere un'altra classe nel foglio di stile che sovrascrive le impostazioni della regola precedente e quindi aggiungere tale classe agli elementi select o al contenitore di essi. Così, per esempio, si potrebbe avere le regole:

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

... e quando si desidera nascondere le seleziona, aggiungere la classe "bar" al contenitore che ha la classe "fool".

In alternativa, applicare le informazioni di stile CSS direttamente agli elementi.

Answer 5

Accedo direttamente alle classi CSS per regolare l'altezza di un gruppo di div contemporaneamente. Questo è come lo sto facendo:

function cssrules(){ 
    var rules={}; var ds=document.styleSheets,dsl=ds.length; 
    for (var i=0;i<dsl;++i){ 
    var dsi=ds[i].cssRules,dsil=dsi.length; 
    for (var j=0;j<dsil;++j) rules[dsi[j].selectorText]=dsi[j]; 
    } 
    return rules; 
}; 
function css_getclass(name,createifnotfound){ 
    var rules=cssrules(); 
    if (!rules.hasOwnProperty(name)) throw 'todo:deal_with_notfound_case'; 
    return rules[name]; 
}; 

e allora si può fare qualcosa di simile css_getclass('.classname').style.background="blue". Ho solo provato questo su Chrome per Windows, buona fortuna con altri browser.

Answer 6

Ecco come lo farei:

//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> 
 
\t style = document.getElementById('style'); 
 
\t setTimeout(function(){style.innerHTML = 'p.myclass{display: none}'}, 5000); 
 
</script>