Почему нельзя добавить стили через js к классу?

Question

[L1nw0od]

Почему вариант 1 где ( newP.style.color = 'yellow' ) - работает
А Вариант 2 где ( styleTest.style.color = 'yellow' ) - не работает
--
Вариант 1

function new1() {
	let body = document.querySelector('body')
	let newDiv = document.createElement('div')
	let newP = document.createElement('p')
	let styleTest = document.querySelector('.styleClassTest')
	
	newDiv.append(newP)
	newP.classList.add('styleClassTest')
	newP.textContent = 'text'
	body.insertAdjacentElement('afterbegin', newDiv)
	console.log(newDiv)	

	if (newP.classList.contains('styleClassTest')) {
		newP.style.color = 'yellow'
		console.log('test1')
	} else {
		console.log('test2')

	}
}

new1()

Вариант 2

function new1() {
	let body = document.querySelector('body')
	let newDiv = document.createElement('div')
	let newP = document.createElement('p')
	let styleTest = document.querySelector('.styleClassTest')
	
	
	newDiv.append(newP)
	newP.classList.add('styleClassTest')
	newP.textContent = 'text'
	body.insertAdjacentElement('afterbegin', newDiv)
	console.log(newDiv)	

	if (newP.classList.contains('styleClassTest')) {
		styleTest.style.color = 'yellow'
	
	} else {
		console.log('test2')

	}
}


new1()

Comments

[Everybody_Lies]

всё у тебя работает
https://jsfiddle.net/kvLp8bcm/

[L1nw0od]

Everybody_Lies, Не работает.
Поствь тут

[L1nw0od]

Everybody_Lies, Дело в том что я добавляю класс (styleClassTest) и хочу цвет давать именно этому классу.

Answer 1

[Everybody_Lies]

у тебя пустой DOM, есть только body.
1. В первой ф-ии ты создаешь div и p, а styleTest у тебя будет равен null, потому что querySelector ищет в DOM дереве .styleClassTest, а его на данном этапе там нет. У тебя есть p с этим классом, но он ещё никуда не добавлен, а просто находится в переменной. Затем ты добавляешь свою матрёшку в body и делаешь проверку и она уже проходит, но styleTest.style.color = 'yellow' не срабатывает, потому что как ты помнишь в переменной styleTest у тебя null.
2. Едем дальше, вторая ф-я всё тоже самое, НО в DOM дереве у тебя уже есть элемент с классом .styleClassTest, поэтому одноимённая переменная уже будет не пустой и ей в условии ниже ты и задаёшь жёлтый цвет.

Comments

[L1nw0od]

Да но во втором варианте все равно не срабатывает цвет.

[Everybody_Lies]

L1nw0od, я же тебе расписал почему не работает.
поставь debugger, открой консоль разработчика и по шагам (F9) пройдись по своему коду. При наведении на переменные ты будешь видеть, что в них находится.