¿Cambiar CSS de clase en Javascript?

Question

Tengo una clase con la pantalla configurada en none Me gustaría en Javascript ahora configúrelo en inline Soy consciente de que puedo hacer esto con una identificación con getElementById, pero ¿cuál es la forma más limpia de hacerlo con una clase ?

Answer 1

Usted puede hacer que   — realmente cambiar las reglas relacionadas con el estilo de una clase   — utilizando el styleSheets array (MDC link, MSDN link), pero, francamente, eres probablemente sea mejor (como dice changelog) tener un estilo separado que defina el display: none y luego quitar ese estilo de los elementos cuando ya no los ocultes.

Answer 2

mejor manera de hacerlo es tener una clase oculta, así:

.hidden { display: none; } 

Después de eso, no es un atributo className a todos los elementos de JavaScript. Puede manipular esa cadena para eliminar las apariciones de la clase hidden y agregar otra.

Un consejo: use jQuery. Hace que sea más fácil lidiar con ese tipo de cosas, puede hacerlo como:

$('#element_id').removeClass('hidden').addClass('something'); 

Answer 3

¿Se refiere a algo como esto?

var elements = document.getElementsByClassName('hidden-class'); 
for (var i in elements) { 
    if (elements.hasOwnProperty(i)) { 
    elements[i].className = 'show-class'; 
    } 
} 

A continuación, el CSS

.hidden-class { display: none; } 
.show-class { display: inline; } 

Answer 4

Puede usar getElementsByClassName en el que obtendrá una variedad de elementos. Sin embargo, esto no está implementado en navegadores más antiguos. En esos casos, getElementsByClassName es undefined por lo que the code has to iterate through elements and check which ones have the desired class name.

Para ello, debe utilizar un marco de JavaScript, como jQuery, Mootools, prototipos, etc.

En jQuery que se podía hacer con una sola línea como esta:

$('.theClassName').css('display', 'inline') 

Answer 5

puede crear nueva regla de estilo en su lugar.

var cssStyle = document.createElement('style'); 
cssStyle.type = 'text/css'; 
var rules = document.createTextNode(".YOU_CLASS_NAME{display:hidden}"); 
cssStyle.appendChild(rules); 
document.getElementsByTagName("head")[0].appendChild(cssStyle); 

$("#YOUR_DOM_ID").addClass("YOUR_CLASS_NAME"); 

Answer 6

Es posible que quiera explotar/reescribir esta función:

function getStyleRule(ruleClass, property, cssFile) { 
    for (var s = 0; s < document.styleSheets.length; s++) { 
     var sheet = document.styleSheets[s]; 
     if (sheet.href.endsWith(cssFile)) { 
      var rules = sheet.cssRules ? sheet.cssRules : sheet.rules; 
      if (rules == null) return null; 
      for (var i = 0; i < rules.length; i++) { 
       if (rules[i].selectorText == ruleClass) { 
        return rules[i].style[property]; 
        //or rules[i].style["border"]="2px solid red"; 
        //or rules[i].style["boxShadow"]="4px 4px 4px -2px rgba(0,0,0,0.5)"; 
       } 
      } 
     } 
    } 
    return null; 
} 

• para escanear todas las hojas de estilo pase adjunto "" como tercer argumento, de lo contrario algo así como "index.css"
• ruleClass contiene el inicio '.'
• si (reglas [i] .selectorText & & normas [i] .selectorText.split (''). IndexOf (propiedad)! == -1) mejora la condición encontrar aquí https://stackoverflow.com/a/16966533/881375
• no se olvide de use la sintaxis de JavaScript sobre las propiedades CSS, por ejemplo caja-sombra vs.boxShadow

Answer 7

Aunque esto es cosa del pasado, aquí algunas observaciones:

o El uso de "display: inline" para hacer las cosas visibles de nuevo puede estropear el flujo de la página. Algunos elementos se muestran en línea, otros bloquean, etc. Esto debe conservarse. Por lo tanto, solo defina un estilo .hidden y elimínelo para hacer que las cosas sean visibles nuevamente.

o Cómo ocultar: Hay (al menos) dos formas de ocultar elementos, una es la "pantalla: ninguna" que hace que el elemento se comporte como si no estuviera allí, y la "visibilidad: oculta" "que hace que el elemento sea invisible pero mantiene el espacio que ocupa. Dependiendo de lo que desea ocultar, la visibilidad puede ser una mejor opción, ya que otros elementos no se moverán al mostrar u ocultar un elemento.

o Agregar/eliminar clases vs. manipular reglas CSS: El resultado es bastante diferente. Si manipulas las reglas de CSS, todos los elementos que tienen una determinada clase de CSS se ven afectados, ahora y en el futuro, es decir, los nuevos elementos agregados dinámicamente al DOM también están ocultos, mientras que cuando agregas o quitas una clase, debes asegurarte de que los elementos añadidos también tienen la clase añadida/eliminada. Entonces, yo diría que agregar/eliminar clases funciona bien para HTML estático, mientras que manipular reglas CSS podría ser una mejor opción para los elementos DOM creados dinámicamente.