Cómo cambiar las propiedades CSS de elementos html usando javascript o jquery

Question

¿Cómo puedo cambiar? CSS de javascript.

Estoy usando jQuery-ui Dialog y quiero cambiar el estilo de un DIV desde javascript.

Gracias

Answer 1

la documentación de jQuery . Si quieres algo que estará allí.

En cualquier caso, si desea agregar estilos a los elementos, es necesario utilizar la función css, que tiene algunas variantes.

$(selector).css(properties);  // option 1
$(selector).css(name, value); // option 2

Así que si usted tiene un DIV con ID de "mydiv" y desea que el fondo de color rojo, que haría

$("div#mydiv").css({'background-color' : 'red'}); // option 1
$("div#mydiv").css('background-color','red');     // option 2

La primera forma es más fácil si se está configurando varias cosas a la vez.

Si desea comprobar lo que una propiedad se establece actualmente que, se utiliza una variante de la segunda opción, basta con omitir el valor.

var color = $("div#mydiv").css('background-color');

haría que el var color ser red si ya ha configurado por encima, por ejemplo.

También puede añadir y eliminar clases, haciendo algo como

$(selector).addClass(class_name);
$(selector).removeClass(class_name);

Answer 2

Esta respuesta funciona incluso sin jQuery.

Así que hay algo como esto:

<style type="text/css">
    .foo { color: Red; }
    .bar { color: Blue; }
</style>
<div class="foo" id="redtext"> some red text here </div>

Si desea cambiar sólo algunos atributos, siempre se puede encontrar el elemento utilizando

var div = document.getElementById('redtext');

función y a continuación, cambiar el estilo de color unido por

div.style.color = 'Green';

La fabricación de su texto aparece en rojo en lugar verde.

Si desea cambiar la clase definida por el div a otra clase de estilo, que puede hacer:

div.className = 'bar';

hacer el div ahora utilizan barra de clase, lo que hace que su texto azul previamente verde.

Answer 3

Hay un par de maneras de manipular elementos de estilos utilizando el framework jQuery. Echar un vistazo a través de la documentación relacionada con CSS y el cambio de atributos:

• http://docs.jquery.com/Attributes/addClass#class
• http://docs.jquery.com/CSS

Answer 4

Trate this.This es el código de jQuery.

 $("myDiv").css({"color":"red","display":"block"})

Si está utilizando Javascript vainilla, prueba esto.

var myDiv = document,getElementById("myDiv");

myDiv.style.display = "block";

myDiv.style.color = "red";