tengo una clase CSS de este modo:Cómo añadir una propiedad de clase existente
.simpleClass {
width: 25px;
}
Y tengo un elemento coincidente:
<div class="simpleClass"></div>
¿Puedo añadir la propiedad display: none; a la clase CSS .simpleClass dinámicamente a través de jQuery? Gracias.
$('.simpleClass').css({display:'none'});
puede especificar el estilo del elemento mediante el uso de .css como
$("div.simpleClass").css("width","25px");
echar un vistazo a jQuery.css()
¡Muchas gracias! – Alex
La hoja de estilo se define en un archivo, y no se puede editar ese con JavaScript Lo que podría hacer es la siguiente:
$(".simpleClass").live("domchanged", function() {
$(this).css("display", "none");
});
Pero esto no es ni entre navegadores compatibles ni eficiente (ni probado por mí;). Entonces propongo usar otra clase de CSS predefinida para este propósito. ¿Por qué necesita algo como esto de todos modos?
Gracias por la respuesta ypur. Pero tengo otra forma de resolver mi problema. Mi problema era un poco diferente y de esta manera lo resolvería. Tengo una tabla donde puedo seleccionar columnas para mostrar. El contenido cargado con Ajax y yo teníamos que determinar qué columnas son visibles y cuáles no. Quería cambiar la propiedad de la clase y luego agregar una clase a un contenido cargado. Pero encontrado de otra manera. Perdón por mi mal inglés =) – Alex
$(document).ready(function(){
$(.simpleClass).css('display','none');
});
La propiedad se agregará a div si ya no existe en la clase css. Por lo tanto, siempre es mejor cambiar la clase css con nuevas propiedades. P.ej.
$(".referenceClass").switchClass("oldClass", "newClass");
Si lo entiendo bien, usted NO quiere dar alojamiento a la instancia de elemento simpleClass, pero le gustaría dar una propiedad adicional para toda la clase (que abarca todos los casos) utilizando JS.
En este caso, puede usar jQuery para agregar un elemento de estilo al encabezado, lo que le brinda la oportunidad de agregar declaraciones de CSS adicionales.
Sin embargo, yo lo haría no lo recomiendo, porque hace que su código y estructura se ensucien.
$("head").append("<style> .simpleClass{ display:none; } </style>");
Este fragmento dará adicional display:none propiedad a todos los .simpleClass elementos existentes en el momento de hacer esto, y también afectará a todos los insertadas tarde-.simpleClass elementos.
Pero esto debe ejecutarse cada vez que se agrega un nuevo elemento con simpleClass al DOM. Pero no hay una forma de navegador cruzado para hacerlo (¿por qué alguien incluso necesita esto?). –
me encuentro con un problema en el que necesito que los elementos se oculten con la pantalla: ninguno, pero primero necesito conocer sus alturas. Esta es una pregunta legítima! –