Como alterar as propriedades css de elementos HTML usando javascript ou jquery

Question

Como posso alterar CSS de javascript.

Eu estou usando jQuery-ui Dialog e eu quero mudar o estilo de um DIV de javascript.

Graças

Answer 1

Confira a documentação jQuery . Se você quer alguma coisa ele vai estar lá.

De qualquer forma, se você quiser adicionar estilos aos elementos, você precisa usar a função css, que tem algumas variantes.

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

Então, se você tem uma DIV com ID de "mydiv" e você quer fazer o fundo vermelho, que você faria

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

A primeira maneira é mais fácil se você estiver configurando várias coisas ao mesmo tempo.

Se você quiser verificar o que uma propriedade é definido como, você usaria uma variante da 2ª opção, basta omitir o valor.

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

faria o var color ser red se você já defini-lo acima, por exemplo.

Você também pode adicionar e remover as classes, fazendo algo como

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

Answer 2

Esta resposta funciona mesmo sem jQuery.

Então você tem algo como isto:

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

Se você deseja mudar apenas alguns atributos, você pode sempre encontrar o elemento usando

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

função e, em seguida, mudar o estilo de cor anexado por

div.style.color = 'Green';

Fazendo o seu texto em vermelho aparecem em verde em vez.

Se você quiser alterar a classe definida para a div para outra classe de estilo, você pode fazer:

div.className = 'bar';

fazendo com que o div agora bar classe de uso, o que torna o seu azul texto previamente verde.

Answer 3

Há um par de maneiras de manipular elementos estilo usando o framework jQuery. Dê uma olhada através da documentação relacionada com CSS e mudar atributos:

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

Answer 4

Tente this.This é código jQuery.

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

Se você estiver usando vanila Javacript, tente isso.

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

myDiv.style.display = "block";

myDiv.style.color = "red";