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,

jquery css dhtml ItsPronounce
fonte
$('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")
Adam Albrecht
fonte
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", "");
Peter Olson
fonte
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': ''});
justkt
fonte
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');
Sonhos surreais
fonte
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.

Adiyya Tadikamalla
fonte
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 :)

Wajid Khan
fonte