• 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">

0 głosów
35 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 (562,680 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 (562,680 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 (562,680 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ź 153 wizyt
pytanie zadane 19 grudnia 2018 w HTML i CSS przez kubekszklany Bywalec (2,890 p.)
0 głosów
3 odpowiedzi 1,480 wizyt
pytanie zadane 4 listopada 2016 w JavaScript przez Mavimix Dyskutant (7,870 p.)
0 głosów
1 odpowiedź 79 wizyt
pytanie zadane 4 kwietnia 2019 w JavaScript przez Hasira Bywalec (2,110 p.)

86,427 zapytań

135,187 odpowiedzi

300,309 komentarzy

57,184 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...