• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

javascript animacja obiektu <i class="bell">

VPS Starter Arubacloud
0 głosów
109 wizyt
pytanie zadane 13 listopada 2021 w JavaScript przez Jacek Śmiel Użytkownik (510 p.)
Witajcie,

usiłuje zmieniać styl diva poprzez php zależnie od wartość rekordu w bazie, wszystko to wyszło świetnie, ale chciałbym poprzez getElementById("bell"); zmieniać style i dodawać mu animacje <i class="bell fa fa-bell"></i>. Próbowałem dokonać tego poprzez getElementsByClassName, ale niestety to też nie pobiera mojego elementu i do zmiennej var bell. W jaki sposób mam dokonać? Czy istnieje jakaś inna funkcja poza getElementsByClassName lub getElementByid, która pozwoli mi tego dokonać?

Pozdrawiam
komentarz 13 listopada 2021 przez Comandeer Guru (599,730 p.)
Pokaż kod, będzie łatwiej pomóc.
komentarz 13 listopada 2021 przez Jacek Śmiel Użytkownik (510 p.)

Mam taki element:

<i class="bell fa fa-bell" onclick="MarkNotyficationsAsRead()"></i>

 

Teraz chciałbym poprzez javascript zapisać go do zmiennej var, niestety taki działanie nie działa:

            <script type="text/javascript">

                $(document).ready(function(){

                    var bell = document.getElementsbyClassName("bell");
                    bell.style.color = "red";
                   

                });

            </script>

 

1 odpowiedź

+1 głos
odpowiedź 13 listopada 2021 przez Comandeer Guru (599,730 p.)

getElementsByClassName zwraca kolekcję elementów, a więc Twój dzwonek byłby w bell[ 0 ]. O wiele wygodniej używać querySelector, który pozwala szukać elementów przy pomocy selektorów CSS i zwraca zawsze 1. znaleziony:

var bell = document.querySelector( '.bell' );

 

komentarz 13 listopada 2021 przez Jacek Śmiel Użytkownik (510 p.)
Świetnie! Działa ;) bardzo dziękuje za pomoc.
komentarz 13 listopada 2021 przez Jacek Śmiel Użytkownik (510 p.)

@Comandeer, teraz, pojawił mi się kolejny problem, chciałem dodać animacje dla dzwonka poprzez js, zrobiłem to w taki sposób:

            <script type="text/javascript">

                $(document).ready(function(){

                    var bell = document.querySelector(".bell");
                    bell.style.color = "red";
                    bell.style.animation = "ring 4s .7s ease-in-out infinite";
                    bell.style.-webkit-animation = "ring 4s .7s ease-in-out infinite";
                    bell.style.-moz-animation = "ring 4s .7s ease-in-out infinite";
                   

                });

            </script>

Lecz to niestety nie działa, gdy dodaje to dla klasy .bell w pliku css animacja działa bez problemu.

1
komentarz 13 listopada 2021 przez Comandeer Guru (599,730 p.)

Jeśli chcesz nadać własności z myślnikiem w nazwie, trzeba ją zapisać w inny sposób:

bell.style[ '-webkit-animation' ]

Chociaż akurat w style ta własność prawdopodobnie jest zapisana jako style.webkitAnimation.

Chociaż wersja dla webkita i mozilli nie jest potrzebna, samo bell.style.animation powinno starczyć.

No i w JS-ie jest Web Animations API.

Podobne pytania

0 głosów
1 odpowiedź 328 wizyt
pytanie zadane 19 grudnia 2018 w HTML i CSS przez kubekszklany Gaduła (3,170 p.)
0 głosów
3 odpowiedzi 2,017 wizyt
pytanie zadane 4 listopada 2016 w JavaScript przez Mavimix Dyskutant (8,390 p.)
0 głosów
1 odpowiedź 117 wizyt
pytanie zadane 4 kwietnia 2019 w JavaScript przez Hasira Bywalec (2,100 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...