Usuń wszystkie style z elementu za pomocą JavaScript
W procesie aktualizacji strony internetowej lub witryny może istnieć wymóg usunięcia całej stylizacji lub jej części z określonego elementu. Oprócz tego dodawanie efektów i komunikatów ostrzegawczych/błędów po kliknięciu myszy lub nachyleniu. W takich przypadkach usunięcie wszystkich stylów z elementu za pomocą JavaScript zastanawia się nad przyciąganiem uwagi użytkownika i wyróżnieniem strony internetowej.
Ten blog omówi podejścia do usunięcia wszystkich stylów z elementu w JavaScript.
Jak usunąć/pominąć wszystkie style z elementu w JavaScript?
Aby usunąć wszystkie style z elementu w JavaScript, można zastosować następujące podejścia:
- "resuseAttribute ()" metoda.
- "styl" nieruchomość.
- "JQuery”Metody.
Śledźmy każde podejścia jeden po drugim!
Podejście 1: Usuń wszystkie style z elementu w JavaScript za pomocą metody removeAttribute ()
„„resuseAttribute ()„Metoda pomija atrybut z elementu. Tę metodę można zastosować w celu pominięcia wszystkich dołączonych stylów z określonego elementu.
Składnia
element.resuseAttribute (nazwa)
W podanej składni:
- "nazwa”Odnosi się do nazwy atrybutu.
Przykład
Przeglądmy następujący przykład:
To jest strona internetowa Linuxhint
W powyższym fragmencie kodu:
- Obejmują podany nagłówek o określonym „ID”I„ „styl" atrybut.
- W części kodu JavaScript uzyskaj dostęp do dołączonego nagłówka z jego „ID" używając "getElementById ()" metoda.
- W następnym kroku zastosuj „resuseAttribute ()„Metoda o atrybucie„styl”Jako jego parametr.
- Spowoduje to usunięcie określonej stylizacji z nagłówka.
Przed usunięciem stylu
Po usunięciu stylu
Z obu powyższych fragmentów obrazu można zaobserwować różnicę przed i po usunięciu stylu.
Podejście 2: Usuń określone style z elementu w JavaScript za pomocą właściwości stylu
„„styl„Właściwość podaje wartość atrybutu stylu elementu. Ta właściwość można wdrożyć w celu usunięcia określonej właściwości zawartej w atrybucie stylu.
Składnia
element.styl.właściwość = wartość
W powyższej składni:
- "wartość”Odpowiada wartości odnoszącej się do określonej właściwości.
Przykład
Przejdźmy do następującego przykładu:
JavaScript to bardzo skuteczny język programowania. Jest to bardzo pomocne w projektowaniu strony internetowej lub witryny. Można go również zintegrować z HTML w celu wdrożenia niektórych dodatkowych funkcji.
Wykonaj następujące kroki podane w powyższych wierszach kodu:
- Dołącz element akapitu o określonym „ID”I„ „styl”Atrybut składający się z podanych właściwości.
- Utwórz także przycisk z załączonym „na kliknięcie„Wydarzenie wywołujące funkcję resureStyle ().
- W następnym kroku dostęp do zawartego akapitu za pomocą „ID" w "getElementById ()" metoda.
- Na koniec przypisz właściwość „szerokość" Jak "zero".
- Spowoduje to usunięcie właściwości szerokości w ramach „styl„Atrybut akapitu na przycisku.
Wyjście
W powyższym wyjściu „„szerokość”Akapitu jest usuwane po kliknięciu przycisku.
Podejście 3: Usuń wszystkie style z elementu w JavaScript za pomocą JQuery
Podejście jQuery można zastosować w celu bezpośredniego pobrania dołączonego elementu i usunięcia jego stylizacji przy przycisku.
Przykład
Poniższy przykład wyjaśnia podaną koncepcję.
Przed usunięciem stylu
W powyższych wierszach kodu:
- Obejmują podany nagłówek. Dodaj także określony obraz o „ID”I jego ustalone wymiary w„styl" atrybut.
- Następnie utwórz przycisk o określonym „ID".
- W części kodu jQuery uzyskaj dostęp do utworzonego przycisku. Po kliknięciu przycisku podana funkcja zostanie uruchomiona.
- W definicji funkcji uzyskaj dostęp do zawartego obrazu przez „ID„Bezpośrednio.
- Zastosuj także „removeAttr ()„Metoda o atrybucie„styl”Jako jego parametr.
- Spowoduje to zaniedbanie ustawionych wymiarów obrazu, usuwając w ten sposób styl elementu na przycisku.
Wyjście
Z powyższego wyjścia jest oczywiste, że ustawione wymiary obrazu w „styl„Atrybut nie wpływa na kliknięcie przycisku.
Wniosek
„„resuseAttribute ()„Metoda,„styl„Własność lub„ ”JQuery„Podejście można zastosować do usunięcia wszystkich stylów z elementu za pomocą JavaScript. Metodę RevelAtTribute () można zastosować w celu bezpośredniego usunięcia całej stylizacji z dostępnego elementu. Właściwość stylu można zaimplementować, aby usunąć określony styl w ramach „styl”Atrybut z elementu. Można zastosować podejście jQuery, aby osiągnąć tę samą funkcjonalność. Ten samouczek wyjaśnia, jak usunąć/pominąć wszystkie style z określonego elementu w JavaScript.