Prop vs attr w JavaScript
Ten blog przedstawi różnice między metodami prop () i attr () w JavaScript.
Różnice podstawowe między prop () i attr () w JavaScript
Poniżej znajdują się różnice między metodami prop () i attr () w JavaScript:
| rekwizyt() | attr () |
|---|---|
| Metoda prop () może zmienić wartość elementu. | Z drugiej strony metoda attr () nie wpływa na wartość elementu. |
| Pokazuje bieżącą wartość kodu HTML. | Pokazuje domyślną wartość ustawioną. |
| Ta metoda jest stosowana jako składnia właściwości do zmiany wartości. | Ta metoda jest używana do atrybutu. |
Sprawdź podany przykład, aby praktycznie dowiedzieć się o różnicach prop () i attr ().
Przykład: prop () i attr () na polu tekstowym wejściowym
W tym przykładzie zastosujemy „attr ()" I "rekwizyt()”Metody na polach tekstowych osobno.
Zobaczmy, jak działają obie metody:
metoda attr () nie zmieni wartości pola tekstowego
Metoda prop () zmieni wartość pola tekstowego
W powyższych wierszach kodu HTML:
- Dołącz element „” i wykonuj podaną stylistykę.
- Uwzględnij także nagłówek.
- Dodane „” jest elementem HTML, który przyjmuje wartość od użytkownika, a „Typ” odpowiada atrybutowi odnoszącemu się do danych wejściowych powinien być tekstem.
- „„ID„Podano atrybut, aby uzyskać dostęp do pola tekstowego. Ustaw także określoną wartość domyślną za pomocą „wartość" atrybut.
- Dołącz także przycisk, aby uruchomić funkcje.
- Następnie uwzględnij „”Tag, aby zgromadzić wynik odpowiadający„attr ()" metoda.
- Podobnie, powtórz dołączone funkcje wyświetlania wyniku „rekwizyt()„Metoda za pomocą„Wprowadź tekst" pole.
Teraz przejdźmy do kodu JavaScript:
>
$ ('#Btnone').kliknij (funkcja ()
$ („#attr”).tekst ($ ('#inputText').attr („wartość”) + „ - wartość domyślna”);
);
);
$ (dokument).gotowy (funkcja ()
$ ('#btntwo').kliknij (funkcja ()
$ („#prop”).Text ($ ('#TextInput').prop („wartość”) + „ - Wartość bieżąca”);
);
);
W powyższym bloku kodu zastosuj następujące kroki:
- Dołącz bibliotekę jQuery w „”Tag do zastosowania swoich metod za pomocą„src" atrybut.
- Następnie zastosuj „gotowy()„Metoda, która wykona podaną funkcję, gdy tylko załadowano model obiektu dokumentu (DOM).
- Teraz uzyskaj dostęp do przycisku utworzonego tak, aby podana funkcja wykonała przycisk, kliknij przez „Kliknij()" metoda.
- W definicji funkcji uzyskaj dostęp do pola tekstowego wprowadzania przez „ID”I zwróć treść tekstową za pośrednictwem„tekst()" metoda.
- Zastosuj także „attr ()„Metoda dostępu do„wartość„Atrybut pola tekstowego wejściowego.
- W takim przypadku wartość pozostanie taka sama, niezależnie od tekstu zdefiniowanego przez użytkownika.
- Podobnie powtórz omówioną procedurę dla „rekwizyt()”Metoda, zgodnie z„attr ()" metoda.
- W takim przypadku tekst zdefiniowany przez użytkownika w polu tekstowym zostanie zaktualizowany o wartość ustaloną i dołączona do pobieranego „„Element po jego identyfikatorze.
Wyjście
Dane wyjściowe pokazuje, że „attr ()„Metoda nie zmienia pierwotnego stanu, podczas gdy„rekwizyt()”Metoda wyświetla zaktualizowaną wartość.
Wniosek
„„attr ()”Metoda nie zmienia atrybutu wartości elementu. Z drugiej strony „rekwizyt()”Metoda to aktualizuje. Obie metody mają swoje zalety i wady w zależności od wymagań użytkownika. W tym blogu podano różnice między metodami attr () i prop () za pomocą przykładu.