Programowanie JavaScript, pobranie wartości opacity bez jQuery

pytanie zadane 9 stycznia 2018 w JavaScript przez Mich Początkujący (340 p.)
zmienione kategorie 9 stycznia 2018 przez Arkadiusz Waluk

Cześć !!!

Dałem sobie wyzwanie, że napisze kod bez użycia jQuery, samym czystym JS. Mam problem z pobraniem wartości opacity z konkretnego klikniętego diva..

zwykłe : 
var opacity = document.getElementById('c'+nr).style.opacity

nie działa.

Ma ktoś jakiś pomysł będę wdzięczny za wszelką pomoc ? :)

2 odpowiedzi

odpowiedź 10 stycznia 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 11 stycznia 2018 przez Mich

Najlepsza

Na początek link: https://codepen.io/anon/pen/WdMLOP?editors=1111

Przeanalizuj sobie na spokojnie co tam się dzieje. Otóż problem w Twoim wypadku prawdopodobnie tkwi w tym, że opacity masz ustawione w CSS, a nie jako style inline (a przynajmniej, mam nadzieję, że nie stosujesz stylowania inline :)

Generalnie działa to tak:

Właściwość style.opacity, style.display itp. itd. odnoszą się do styli przypisanych właśnie inline. Można w ten sposób modyfikować style, np. ustawiając:

element.style.display="none"

ale nie jest to dobry sposób na odczytywanie właściwości. Lepiej w tym celu użyć metody np. getComputedStyle obiektu globalnego window aby wskazać element, który nas interesuje (w dokumentacji poczytaj też o drugim argumencie tej metody, czasami przydatnym). Następnie odczytujesz właściwości z obiektu zwróconego przez tę metodę, np. poprzez metodę getPropertyValue.

komentarz 10 stycznia 2018 przez Mich Początkujący (340 p.)

dzięki wielkie sprawdzę ten sposób :)

komentarz 11 stycznia 2018 przez Mich Początkujący (340 p.)

Działa jak miód malina, o to chodziło

komentarz 11 stycznia 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Cieszę się :)

Ale zwróć uwagę również na odpowiedź kolegi @kap. Dobrze sugeruje Ci, abyś przemyślał w kolejnych projektach mniejszą ingerencję w CSS z poziomu JS. Warto zrobić wyraźny podział na HTML - semantyka, treść, CSS - wygląd, JS - zdarzenia, interakcje itp. I np. zamiast zmieniać CSS w JS to lepiej poprzez JS np. dodać, odjąć, zmienić klasę, i tam ustalać wygląd.

Poczytaj też o metodzie element.classList, myślę, że przyda Ci się w kolejnych projektach.

komentarz 12 stycznia 2018 przez Mich Początkujący (340 p.)

Znam metodę element.classList i używam jej do zmiany właściwości CSS. W kodzie potrzebowałem jedynie pobrać opacity, aby sprawdzić warunkiem czy element jest widoczny na stronie.