javascript - propiedad - Cambia la regla CSS en clase usando JQuery

modificar clase css jquery

Question

Tengo una clase en CSS

.Foo
{
  width:20px;
}

Usando Jquery me gustaría hacer algo similar a esto en un evento:

$(".Foo").css("width", "40px");

Esto no funciona. ¿Es este el enfoque equivocado? ¿Debo usar addClass () y removeClass ()?

EDIT: me di cuenta de mi problema. Este comando, de hecho, funciona. En mi aplicación particular, no había creado los elementos utilizando la clase antes de usar el comando, así que cuando se crearon no se cambió nada.

Básicamente, este comando no cambia la regla de estilo CSS, solo los elementos que usan la clase.

Answer 1

Deberías estar seleccionando un elemento con jQuery. Eres consciente de que no estás seleccionando la clase CSS en sí, ¿correcto?

Una vez que tenga un elemento con clase = "Foo", puede seleccionarlo como lo ha hecho, y puede establecer las propiedades de css manualmente como lo está tratando de hacer, o puede usar agregar clase como:

$ (". Foo"). AddClass (''Foo'');

Por supuesto, dado que está seleccionando la misma clase que está agregando, realmente no tiene sentido.

Answer 2

Esto puede funcionar para usted .. $ (". Foo"). Css ("width", "40px");

Answer 3

Intenta usar múltiples estilos

.FooSmall
{
  width:20px;
}
.FooBig
{
  width:40px;
}

$(''#theTarget'').removeClass(''FooSmall'').addClass(''FooBig'');

Answer 4

Puedes cambiar una regla de estilo CSS. Necesitas mirar:

colección de hojas de document.styleSheets
Propiedad styleSheet.cssRules (o styleSheet.rules para IE7 e IE8)
propiedad rule.selectorText
propiedad rule.style

Por ejemplo:

var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
    var rule = rules[i];
    if (/(^|,) */.Foo *(,|$)/.test(rule.selectorText))
    {
        fooRule = rule;
        break;
    }
}
fooRule.style.width = "40px";

Demostración de trabajo: jsfiddle.net/kdp5V

Answer 5

Sí, debe usar addClass y removeClass para cambiar el estilo. En tu css, define un par de clases diferentes y cambia entre ellas.

Answer 6

Tengo este ejemplo en CSS api help en JQuery API.

esto funcionó para mí: http://jsfiddle.net/LHwL2/

para obtener ayuda completa, lea el css api en jQuery.css

Answer 7

puede agregar el estilo manualmente al encabezado con jquery:

  $(''head'').append(''<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>'');

luego cambiarlo en un evento como por ejemplo:

  $(window).resize(function(){
     $(''#addedCSS'').text(''.Foo {width:80px;}'');
  });

Answer 8

jQuery.css encontrará todos los elementos existentes en la página que tienen la clase Foo , y luego establecerá su width estilo en línea a 40px .

En otras palabras, esto no crea ni cambia una regla css: si agrega dinámicamente un elemento con la clase Foo , todavía tendrá un ancho de 20 20px , porque su estilo en línea no se ha configurado para anular el CSS predeterminado regla.

En su lugar, debe usar addClass y removeClass y controlar los estilos en su CSS estático.