JS - selektor elementów zwraca null

pytanie zadane 4 lipca 2019 w JavaScript przez kralcz88 Obywatel (1,810 p.)

Witam!

Mam dziwny problem z kodem poniżej. Otóż do zmiennej w JS nie zostaje przypisany dany element DOM. Zwracana wartość to null.

Co ciekawe, selektory działają bo gdy wpiszemy je w konsoli to wybiera poprawny element.

<body>
	<div class="hamburgerWrapper">
	<div class="hamburgerInner"></div>
	</div>
</body>

const hamburgerWrapper = document.querySelector('.hamburgerWrapper');

const hamburgerInnerBefore = document.getElementsByClassName('hamburgerInner')[0];

2 odpowiedzi

odpowiedź 4 lipca 2019 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 4 lipca 2019 przez kralcz88

Najlepsza

a gdzie odpalasz skrypt JS, nie czasem w sekcji head, gdy jeszcze nie masz drzewka DOM? Przesuń JS na koniec body i daj znac czy to jest to, czy szukamy dalej :)

komentarz 4 lipca 2019 przez kralcz88 Obywatel (1,810 p.)

Shame on me.

To chyba znak, żeby dziś dać sobie już spokój i odpocząć :)

komentarz 4 lipca 2019 przez kralcz88 Obywatel (1,810 p.)

Pytanie dodatkowe - a czy jest możliwe wybrać w JS pseudoelement ::before lub ::after ?

komentarz 4 lipca 2019 przez Tomek Sochacki Ekspert (227,510 p.)

jest, np.:

getComputedStyle(document.querySelector('selector'), ':after').getPropertyValue('content')

komentarz 4 lipca 2019 przez kralcz88 Obywatel (1,810 p.)

Tylko, że to wygląda tak jakby getCompytedStyle pozwoliło mi tylko pobrać właściwości danego elementu, a ja docelowo chciałbym pseudoelmentom nadać nowe właściwści CSS, a dokładnie chciałbym transform: rotate(-90deg) translateX(6px);

komentarz 4 lipca 2019 przez Chess Szeryf (76,710 p.)
edycja 4 lipca 2019 przez Chess

Napisz może setProperty dla ustawienia dynamicznie stylu CSS lub zastosuj kod poniżej.

body::before {
  content: "hello";
}

<body style="background: darkolivegreen;">

var declaration = document.styleSheets[0].rules[0].style;
console.log(declaration);
declaration.cssText = "content: 'hello2';";

</body>

komentarz 4 lipca 2019 przez kralcz88 Obywatel (1,810 p.)

Kombinuje coś w tym stylu, ale teraz z kolei konsola wyrzuca błąd, że nie widzi elementu:

const hamburgerWrapper = document.querySelector('.hamburgerWrapper');


hamburgerWrapper.addEventListener('click', function(){
	window.getComputedStyle(this,':after').style.setProperty('opacity', '0');
});

1	komentarz 4 lipca 2019 przez Comandeer Guru (600,810 p.) Użyj zmiennych CSS albo po prostu nadaj klasę elementowi, który ma pseudoelement i w taki sposób go ostyluj,

komentarz 4 lipca 2019 przez Chess Szeryf (76,710 p.)

The object from getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a <style> element or an external stylesheet.

Źródło - MDN.

Nie możesz ustawić parametru dla getComputedStyle, ponieważ to jest tylko do odczytu, nie do zapisu. Skorzystaj więc z innej właściwości.

komentarz 4 lipca 2019 przez kralcz88 Obywatel (1,810 p.)

@Comandeer, tak właśnie zrobiłem i teraz wszystko gra. Problemem było tylko to że ja chciałem atakować pseudoelement o obiektu na którym będzie wywołany event. Na szczęście zapięcie klasy z CSS pomogło

.open::affter {...}