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

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

Odpowiedź jest tutaj. Jak dynamicznie dodać styl wyrównywania tekstu za pomocą jQuery

— Koń
ź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