Adicionar e remover atributo de estilo de div com jquery


103

Eu herdei um projeto no qual estou trabalhando e estou atualizando algumas animações jquery (muito pouca prática com jquery).

Tenho um div do qual preciso adicionar e remover o atributo de estilo. Aqui está o div:

<div id='voltaic_holder'>

Em um ponto da animação, preciso adicionar um estilo a ela:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

Eu pesquisei e encontrei o .removeAttr()método, mas não consigo ver como adicioná-lo, ou mesmo partes remotas dele (como o topo: apenas -75px).

Obrigado,


$('voltaic_holder').style = nullpossivelmente? Os estilos têm sua própria árvore de objetos inteira. a maioria dos outros atributos são apenas dados do tipo chave = valor.
Marc B,

Respostas:


246

Você pode fazer qualquer um dos seguintes

Defina cada propriedade de estilo individualmente:

$("#voltaic_holder").css("position", "relative");

Defina várias propriedades de estilo de uma vez:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Remova um estilo específico:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Remova todo o atributo de estilo:

$("#voltaic_holder").removeAttr("style")

Posso adicionar mais de 1 propriedade css por linha? Ou eu tenho que fazer um para cada propriedade de estilo assim: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
ItsPronounce em

3
Para responder a isso, sim, você pode. Basta usar um literal de objeto na função .css (). Como $ ('foo'). Css ({'height': '30px', 'width': '50px'});
Richard Neil Ilagan,

@AdamAlbrecht Como posso remover um estilo específico que adicionei porque em $ ("# voltaic_holder"). RemoveAttr ("estilo") ele remove todos os estilos aplicados que estavam por padrão com o recém-adicionado.
3 regras de

21

Para remover completamente o atributo de estilo da voltaic_holderextensão, faça o seguinte:

$("#voltaic_holder").removeAttr("style");

Para adicionar um atributo, faça o seguinte:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

Para remover apenas o estilo superior, faça o seguinte:

$("#voltaic_holder").css("top", "");

15

Se você estiver usando jQuery, use css para adicionar CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

Para remover atributos CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});

Você não pode remover o atributo position ou top do elemento voltaic_holder, porque ele não tem esses atributos. Essas são propriedades css definidas no atributo de estilo.
Peter Olson

@Peter - doh! Editado para usar.css
justkt

10

A maneira fácil de lidar com isso (e a melhor solução HTML para inicializar) é configurar classes que tenham os estilos que você deseja usar. Então é uma simples questão de usar addClass () e removeClass () , ou mesmo toggleClass () .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

ou mesmo

$('#voltaic_holder').toggleClass('shiny dull');


2

No caso do método .css em jQuery para ! Important regra não se aplica.

Neste caso, devemos usar a função .attr .

Por exemplo: se você deseja adicionar estilo conforme abaixo:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

Você deveria usar:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Espero que ajude alguém.


1

Remova o atributo de estilo de div usando a consulta J:

$("#TableDiv").removeAttr("style");

Adicione estilo a div usando a consulta J:

$("#TableDiv").attr("style", "display: none;");

Adicione um estilo usando html:

<div class="row" id="TableDiv" style="display: none;">
</div>

Espero que seja útil :)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.