Jak dodać / zaktualizować atrybut do elementu HTML za pomocą JavaScript?

128

Próbuję znaleźć sposób, który doda / zaktualizuje atrybut za pomocą JavaScript. Wiem, że mogę to zrobićsetAttribute() funkcją, ale to nie działa w IE.

javascript html cross-browser deweloper
źródło

Odpowiedzi:

163

Możesz przeczytać tutaj o zachowaniu atrybutów w wielu różnych przeglądarkach, w tym IE.

element.setAttribute()powinien załatwić sprawę, nawet w IE. Próbowałeś tego? Jeśli to nie zadziała, może element.attributeName = 'value'zadziała.

i ja
źródło
5
to działa. tworzy atrybut, jeśli nie istnieje, i aktualizuje go, jeśli istnieje. czy jest to gdzieś udokumentowane, jeśli chodzi o to, jak to działa?
dev.e.loper
@ dev.e.loper DOM spec to dobre miejsce do rozpoczęcia: w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ ...
valentinas
1
Kiedy wykonuję następujące czynności: document.getElementById("nav").setAttribute("class", "active");działa w konsoli Chrome JS, ale na rzeczywistej stronie nie działa… jakieś pomysły? Nawiasem mówiąc, na właściwej stronie umieszczam .jsplik przed końcem bodyzakresu.
knownasilya
36

To, co wydaje się łatwe, jest w rzeczywistości trudne, jeśli chcesz być w pełni kompatybilny.

var e = document.createElement('div');

Powiedzmy, że masz do dodania identyfikator „div1”. 

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')
Wszystkie one będą działać z wyjątkiem ostatniego w IE 5.5 (który jest starożytną historią w tym momencie, ale nadal jest domyślnym XP bez aktualizacji).

Ale są oczywiście nieprzewidziane okoliczności. Nie działa w IE przed 8: e.attributes['style'] nie będzie błąd, ale nie będzie faktycznie ustawić klasę, to musi być className: e['class'].
Jeśli jednak używasz atrybutów, to zadziała:e.attributes['class']

Podsumowując, traktuj atrybuty jako dosłowne i zorientowane obiektowo.

Dosłownie chcesz po prostu wypluć x = 'y' i nie myśleć o tym. Do tego służą atrybuty setAttribute, createAttribute (z wyjątkiem wyjątku stylu IE). Ale ponieważ są to naprawdę przedmioty, może się pogubić.

Ponieważ będziesz miał problem z poprawnym utworzeniem elementu DOM zamiast jQuery innerHTML slop, potraktowałbym go tak, jak jeden i trzymałbym się e.className = 'fooClass' i e.id = 'fooID'. To jest preferencja projektowa, ale w tym przypadku próba traktowania jest czymś innym niż obiekt działa przeciwko tobie.

Nigdy nie przyniesie to odwrotnego skutku, tak jak inne metody, po prostu pamiętaj, że klasa to nazwa klasy, a styl jest obiektem, więc jest to style.width, a nie style = "width: 50px". Zapamiętaj również tagName, ale jest to już ustawione przez createElement, więc nie powinieneś się tym martwić.

To trwało dłużej niż chciałem, ale manipulacja CSS w JS to trudna sprawa.

JPearce
źródło
5
Windows XP wyszedł z IE6, a nie 5.5. To byłoby straszne.
mgol
To działa z idczymś innym, a nie z czymś takim jakdata-toggle
przeciągnięcie 1
30

Obowiązkowe rozwiązanie jQuery . Znajduje i ustawia titleatrybut na foo. Zwróć uwagę, że wybiera to pojedynczy element, ponieważ robię to według identyfikatora, ale możesz łatwo ustawić ten sam atrybut w kolekcji, zmieniając selektor.

$('#element').attr( 'title', 'foo' );
tvanfosson
źródło
3
+1 dla rozwiązania jQuery. W moim przypadku starałem się uniknąć jQuery i napisać go w czystym javascript ze względu na wymagania mojej pracy. Cieszę się, że istnieją obie odpowiedzi. Dzięki.
NuclearPeon
7

Co chcesz zrobić z atrybutem? Czy to atrybut HTML, czy coś własnego?

W większości przypadków możesz po prostu potraktować to jako właściwość: chcesz ustawić tytuł dla elementu? element.title = "foo"zrobię to.

W przypadku własnych niestandardowych atrybutów JS DOM jest naturalnie rozszerzalny (aka expando = true), czego prostym rezultatem jest to, że możesz to zrobić, element.myCustomFlag = fooa następnie przeczytać bez problemu.

annakata
źródło