Dodawanie i usuwanie atrybutu style z div za pomocą jquery

103

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

Mam element div, który 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 dookoła i znalazłem .removeAttr()metodę, ale nie widzę, jak ją dodać, ani nawet odległych części (takich jak góra: tylko -75px).

Dzięki,

jquery css dhtml Jego zdaniem
źródło
$('voltaic_holder').style = nullbyć 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:

246

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

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

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

Ustaw wiele 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")
Adam Albrecht
źródło
Czy mogę dodać więcej niż 1 właściwość CSS w każdym wierszu? Czy też muszę zrobić po jednym dla każdej właściwości stylu, jak na przykład: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
JegoPronounced
3
Aby odpowiedzieć na to pytanie, tak, możesz. Po prostu użyj literału obiektu w funkcji .css (). Na przykład $ ('foo'). Css ({'height': '30px', 'width': '50px'});
Richard Neil Ilagan,
@AdamAlbrecht Jak mogę usunąć określony styl, który dodałem, ponieważ w $ ("# voltaic_holder"). RemoveAttr ("style") usuwa cały zastosowany styl, który był domyślnie z nowo dodanym.
3 zasady
21

Aby całkowicie usunąć atrybut stylu voltaic_holderrozpiętości, 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 górny styl, wykonaj następujące czynności:

$("#voltaic_holder").css("top", "");
Peter Olson
źródło
15

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

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

Aby usunąć atrybuty CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});
justkt
źródło
Nie można usunąć pozycji ani atrybutu top z elementu voltaic_holder, ponieważ nie ma on tych atrybutów. Są to właściwości css zdefiniowane w atrybucie style.
Peter Olson,
@Peter - doh! Zmieniony do użytku.css
justkt
10

Najłatwiejszym sposobem poradzenia sobie z tym (i najlepszym rozwiązaniem HTML do rozruchu) jest skonfigurowanie klas, które mają style, których chcesz używać. Wtedy wystarczy użyć addClass () i removeClass () , a nawet toggleClass () .

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

lub nawet

$('#voltaic_holder').toggleClass('shiny dull');
Surreal Dreams
źródło
2

W przypadku metody .css w jQuery dla ! Ważna reguła nie będzie miała zastosowania.

W tym przypadku powinniśmy użyć funkcji .attr .

Na przykład: jeśli chcesz dodać styl, jak poniżej:

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

Powinieneś użyć:

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

Mam nadzieję, że to komuś pomoże.

Adiyya Tadikamalla
źródło
1

Usuń atrybut stylu z div za pomocą zapytania J:

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

Dodaj styl do div za pomocą zapytania J:

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

Dodaj styl za pomocą html:

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

Mam nadzieję, że to pomoże :)

Wajid khan
źródło