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

Javascript getComputedStyle źle odczytuje "visibility"

VPS Starter Arubacloud
0 głosów
145 wizyt
pytanie zadane 23 lipca 2018 w JavaScript przez daniel1806 Obywatel (1,780 p.)

Witam. Może zacznę od kodu:

function btnOnOff()
    {
        if(window.innerWidth >= 1024 && window.scrollY < 200)
            btn.style.setProperty("visibility", "hidden");
        else
            btn.style.setProperty("visibility", "visible");
    }
    btnOnOff();
    setInterval(btnOnOff, 1);
    
    const a = getComputedStyle(btn);//Na razie test. Jakby co to out
    console.log(a.visibility);

Jak widać w powyższym kodzie, kiedy tylko przy szerokim oknie przeglądarki (powyżej 1024px) strona zostanie zescrollowana o 200px, to przycisk "hamburger" (który jest zwykłym <buttonem> w DOM) ma znikać. I Tak się dzieje - ta część działa bez zarzutu. Problemem jest natomiast to, że przy odczycie własności visibility poprzez getComputedStyle() czasem pobrana zostaje nieprawidłowa wartość. Dodam, że ten problem zauważyłem u mnie tylko na Mozilli, na Chromie póki co wszystko działa dobrze.

Pytanie brzmi: czy możliwe, że Firefox czasem zamiast pobierać właściwości elementów ze strony, wczytuje sobie ich ostatnie wartości z cache, żeby cośtam przyspieszyć, czy jakoś tak? A jeżeli powód jest inny to prosiłbym o wyjaśnienie, bo jak dla mnie to trochę dziwne zachowanie przeglądarki, zwłaszcza, że getComputedStyle() ma pobierać to co się wyrenderowało a nie jakieś śmieci z pamięci podręcznej.

Z góry dzięki za pomoc, bo walczę z tym już cały dzień

2 odpowiedzi

0 głosów
odpowiedź 23 lipca 2018 przez Greeenone Pasjonat (16,100 p.)

Nie dałeś window.onload. Przez to skrypt uruchomił się przed całkowitym wczytaniem.

Na przykład:

Dajmy na to, że w 20 linii masz kod który korzysta ze zmiennej X która jest zdefiniowana w linii numer 150. Skrypt się gubi ponieważ skrypt uruchomił się ale zmienna jeszcze nie została załadowana do pamięci. 

(Jeśli dobrze zrozumiałem twój problem)
 

  function btnOnOff()
    {
        if(window.innerWidth >= 1024 && window.scrollY < 200)
            btn.style.setProperty("visibility", "hidden");
        else
            btn.style.setProperty("visibility", "visible");
    }
    window.onload = function() {
    btnOnOff();
    setInterval(btnOnOff, 1);

    const a = getComputedStyle(btn);//Na razie test. Jakby co to out
    console.log(a.visibility);
  }

 

komentarz 24 lipca 2018 przez daniel1806 Obywatel (1,780 p.)
Dzięki za odpowiedź.

Problem dobrze zrozumiałeś, tyle że cały skrypt mam wstawiony do zdarzenia DOMContentLoaded, więc powinien się odpalić dopiero po załadowaniu wszystkich elementów drzewa DOM. W związku z tym ich CSS-owe własności powinny być dobrze odczytywane (tak myślę). Chyba, że window.onload działa jeszcze inaczej niż  DOMContentLoaded?
0 głosów
odpowiedź 24 lipca 2018 przez pablop76 VIP (123,060 p.)
edycja 24 lipca 2018 przez pablop76

Akurat jest odwrotnie. Na dużych po zeskrolowaniu pojawia się. A na mniejszych jest cały czas.

  if(window.innerWidth >= 1024 && window.scrollY < 200)
            btn.style.setProperty("visibility", "hidden");
  else
            btn.style.setProperty("visibility", "visible");

Twoja metoda getComputedStyle()  zwraca obiekt "na dzień dobry", nie jest uzależniona od zmiany szerokości ekranu. Dlatego jest uzależniona od odświeżenia ekranu i pewnie ma taka wartość jaka jest w momencie odpalenia przykładu w zależności od tego czy okno jest zmniejszone czy nie.

Do zdarzenia scroll użyj nasłuchiwania scoll

A do zdarzenia zmiany rozmiaru użyj nasłuchiwania resize

 

komentarz 30 lipca 2018 przez daniel1806 Obywatel (1,780 p.)
Dzięki bardzo za odpowiedź. Zrobiłem już tak jak napisałeś i użyłem eventListenera do nasłuchu zdarzeń i teraz działa idealnie. Natomiast dzięki za wyjaśnienie poprzedniego problemu. Już wiem co się tam w bebechach przeglądarki działo.

Pozdrawiam

Podobne pytania

0 głosów
1 odpowiedź 412 wizyt
pytanie zadane 8 listopada 2017 w HTML i CSS przez Michał Bartnik Początkujący (440 p.)
0 głosów
1 odpowiedź 114 wizyt
pytanie zadane 9 lipca 2020 w JavaScript przez Author[] Gaduła (3,130 p.)
0 głosów
1 odpowiedź 153 wizyt
pytanie zadane 28 sierpnia 2017 w JavaScript przez MsMaciek123 Pasjonat (24,760 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...