Pytanie Dodawanie i usuwanie atrybutów stylu z div przy pomocy jquery


Odziedziczyłem projekt, nad którym pracuję i aktualizuję niektóre animacje jquery (bardzo mało praktyki z jquery).

Mam div, z którego muszę dodać i usunąć atrybut stylu. Oto div:

<div id='voltaic_holder'>

W pewnym momencie animacji muszę dodać do niej styl:

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

Szukałem i znalazłem .removeAttr() metoda, ale nie widzę sposobu dodania go, a nawet jego odległych części (takich jak top: tylko -75px).

Dzięki,


76
2018-03-22 16:57


pochodzenie


$('voltaic_holder').style = null być może? Style mają własne całe drzewo obiektów. większość innych atrybutów to po prostu dane typu klucz = wartość. - Marc B


Odpowiedzi:


Możesz wykonać jedną z następujących czynności

Ustaw każdą właściwość stylu osobno:

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

Ustaw kilka właściwości stylu jednocześnie:

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

Usuń określony styl:

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

Usuń cały atrybut stylu:

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

175
2018-03-22 17:02



Czy mogę dodać więcej niż 1 właściwość css na linię? Czy muszę wykonać jedną dla każdej właściwości stylu, jak na przykład: $("#voltaic_holder").css("position", "relative");  $("#voltaic_holder").css("top", "-75"); - drpcken
Aby odpowiedzieć, tak, możesz. Po prostu użyj literału obiektowego na funkcji .css (). Podobnie jak $ ('foo'). Css ({'height': '30px', 'width': '50px'}}); - Richard Neil Ilagan
Tak, możesz - zobacz moją edytowaną odpowiedź powyżej - Adam Albrecht
@AdamAlbrecht Jak mogę usunąć konkretny styl, który dodałem, ponieważ w $ ("# voltaic_holder"). RemoveAttr ("style") usuwa domyślnie nowo zastosowany styl z nowo dodanym. - 3 rules


Aby całkowicie usunąć atrybut stylu voltaic_holder rozpiętość, wykonaj następujące czynności:

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

Aby dodać atrybut, wykonaj następujące czynności:

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

Aby usunąć tylko styl górny, wykonaj następujące czynności:

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

17
2018-03-22 17:01





Jeśli używasz jQuery, użyj css dodać CSS

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

Aby usunąć atrybuty CSS

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

15
2018-03-22 17:00



Nie można usunąć pozycji lub najwyższego atrybutu z elementu voltaic_holder, ponieważ nie ma on atrybutów thos. Są to właściwości css zdefiniowane w atrybucie stylu. - Peter Olson
@Peter - doh! Edytowany do użycia .css - justkt


Łatwym sposobem na obsłużenie tego (i najlepszego rozwiązania HTML do uruchomienia) jest ustawienie klas, które mają style, których chcesz użyć. Wtedy jest to prosta sprawa użycia addClass () i removeClass (), lub nawet toggleClass ().

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

lub nawet

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

7
2018-03-22 17:01





Anwer jest tutaj Jak dynamicznie dodać styl do wyrównania tekstu za pomocą jQuery


1
2018-03-22 17:01