Jak dodać atrybut do elementu DOM w JavaScript
DOM jest strukturą dokumentu HTML, który zaczyna się od jego głównego elementu do końca dokumentu. Każdy element, taki jak „P”,„div", Lub "tabela„, Jest nazywany elementem DOM. Elementy DOM pozwalają użytkownikowi modyfikować treść strony internetowej. Atrybut określa zbiór obiektów. Ponadto JavaScript zapewnia metody setAttribute () do dodawania lub modyfikacji atrybutów elementów DOM. W tym poście wykazaliśmy wszystkie możliwe metody dodawania atrybutów do elementów DOM w JavaScript.
- Jak dodać atrybut do elementu DOM w JavaScript
- Dodaj atrybut do elementu DOM
- Dodaj wiele atrybutów do elementu DOM
Jak dodać atrybut do elementu DOM w JavaScript?
Metoda setAttribute () jest stosowana do dodania wartości atrybutu do istniejącego elementu. Jeśli atrybut jest już dodany, setAttribute () aktualizuje wartość. Wymaga dwóch wejść, jeden to nazwa, a druga określa wartość. Ładując stronę internetową, właściwość atrybutu jest stosowana do elementów DOM. Składnia metody setAttribute () podano poniżej:
Składnia
setAttribute (nazwa, wartość)
Parametry są opisane w następujący sposób:
- nazwa: Odnosi się do nazwy atrybutu.
- wartość: Określa wartość atrybutu.
Przykład 1: Dodaj atrybut do elementu DOM
Przykład jest rozważany przez dodanie atrybutu do elementu DOM. Metoda setAttribute () jest wykorzystywana do dodawania wartości do atrybutu. Przykładowy kod jest napisany poniżej:
Kod
Przykład dodania atrybutu do elementu DOM.
Kliknij przycisk, aby go wyłączyć
Opis kodu znajduje się poniżej:
- Przycisk nazwany „Przycisk kliknij”Jest dołączony i ma unikalny identyfikator”Btn".
- Następnie ten przycisk jest powiązany z „btn_fn ()" metoda.
- W tej metodzie „GetElementById”Jest wykorzystywany do wyodrębnienia„Btn" ID.
- Wreszcie „„setAttribute ()”Metoda jest stosowana w celu wyłączenia przycisku, przekazując pusty Wyłącza przycisk, naciskając go.
Wyjście
Obserwuje się, że po naciśnięciu „Przycisk kliknij”, Wartość niepełnosprawna jest przekazywana przez„setAttribute ()" metoda.
Przykład 2: Dodaj wiele atrybutów do elementu DOM
Uważa się, że przykład dodawał wiele atrybutów do elementu DOM, wykorzystując metodę setAttribute () w JavaScript. Metoda setAttribute () wyodrębnia elementy DOM przez GetElementById. Następnie przypisz właściwość metodą setAttribute (). Te atrybuty zawierają przycisk, link i właściwość stylizacji. Na przykład kod jest następujący.
Kod
Przykład dodania atrybutu za pomocą metody setAttribute ().
Google.com
Opis kodu znajduje się w następującej kolejności:
- Po pierwsze, kotwica ”„Tag jest stosowany przez przekazanie identyfikatora”połączyć".
- W tym linku „com”Jest przekazywany jako tekst do wyświetlania w przeglądarce.
- Przycisk "Dodaj atrybut”Jest dołączone, które jest powiązane z„zabawa()" metoda. „„func ()”Zostanie uruchomiony przyciskiem z na kliknięcie wartość.
- „„setAttribute ()„Metoda jest wykorzystywana do pobierania”połączyć" za pomocą "GetElementById”I„Href„Atrybut jest ustawiony, którego wartość to„https: // www.Google.com/".
- Podobnie „A”styl„Atrybut jest ustawiony, którego wartość jest „Kolor tła: czerwony” Do zmiany koloru tła tekstu.
Wyjście
Po pierwsze, tekst nie można kliknąć. Po naciśnięciu przycisku „Dodaj atrybut”, Do tekstu dodaje się link„Google.com”, Który jest teraz klikalny i otwiera stronę internetową powiązaną z linkiem.
Wniosek
Metoda setAttribute () jest stosowana do dodania atrybutu do elementów w JavaScript. Ta sama metoda aktualizuje wartość atrybutu, jeśli element DOM już zawiera atrybut. Ten post wykazał metody dodawania atrybutów do elementów DOM w JavaScript. Metoda setattribtue () ma nazwę i wartość jako argumenty. Ponadto użytkownicy mogą ustawić wiele atrybutów elementom DOM, wykorzystując JavaScript. Ten artykuł pokazuje dwa przykłady, dodając, a także modyfikując wartość atrybutu elementu DOM w JavaScript.