javascript - body_class - handlebars if condition example

¿Cambiar CSS de clase en Javascript?

Question

Tengo una clase con la pantalla configurada en none Me gustaría configurarlo en Javascript. Ahora sé 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

¿Te refieres a algo como esto?

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

Entonces el CSS

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

Answer 2

Aunque esto se ha ido hace tiempo, aquí hay algunos comentarios:

• El uso de la display: inline para volver a ver las cosas 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 oculto y elimínelo para que las cosas vuelvan a ser visibles.

• Cómo ocultar: hay (al menos) dos formas de ocultar elementos, una es la display: none mencionada anteriormente display: none que básicamente hace que el elemento se comporte como si no estuviera allí, y la visibility: hidden que hace que el elemento sea invisible pero mantiene la Espacio que ocupa. Dependiendo de lo que quiera ocultar, la visibilidad puede ser una mejor opción, ya que otros elementos no se moverán al mostrar / ocultar un elemento.

• Agregar / eliminar clases frente a manipular reglas CSS: el resultado es bastante diferente. Si manipula 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 se ocultan, mientras que cuando agrega / elimina una clase, debe asegurarse de que Los elementos agregados también tienen la clase agregada / eliminada. Por lo tanto, diría que agregar / eliminar clases funciona bien para HTML estático, mientras que manipular las reglas CSS podría ser una mejor opción para los elementos DOM creados dinámicamente.

Answer 3

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

.hidden { display: none; }

Después de eso, hay un atributo className para cada elemento en JavaScript. Puede manipular esa cadena para eliminar las apariciones de la clase hidden y agregar otra.

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

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

Answer 4

Puede hacer eso (en realidad, cambiar las reglas de estilo relacionadas con una clase) utilizando la matriz styleSheets ( enlace MDC , enlace MSDN ), pero, francamente, probablemente esté mejor (como dijo el registro de cambios) que tiene un estilo separado que define la display: none y luego, elimine ese estilo de los elementos cuando desee que ya no estén ocultos.

Answer 5

Puede que desee 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 adjuntas pase "" como tercer argumento, de lo contrario algo como "index.css"
• ruleClass contiene el inicio ''.''
• if (rules [i] .selectorText && rules [i] .selectorText.split ('',''). indexOf (property)! == -1) mejora de condición encontrada aquí https://.com/a/16966533/881375
• no olvide usar la sintaxis de javascript sobre las propiedades de css, por ejemplo, box-shadow vs. boxShadow

Answer 6

Puede usar getElementsByClassName en el que obtendrá una matriz de elementos. Sin embargo, esto no está implementado en navegadores antiguos. En esos casos, getElementsByClassName undefined está undefined por lo que el código debe iterar a través de los elementos y verificar cuáles tienen el nombre de clase deseado .

Para esto debes usar un framework javascript como jQuery, mootools, prototype, etc.

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

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

Answer 7

puedes crear una 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");