Как задать стиль обьектом?

Question

[Ingernirated]

Подскажите, как в этот код подключить пример с картинки, чтобы стиль к блоку lightblue добавился одним обьектом?
https://jsfiddle.net/ue86xrqe/9/

Answer 1

[Олег]

https://jsfiddle.net/Politonius/ue86xrqe/10/

Comments

[Ingernirated]

спасибо, не знал о таком методе!!
а ещё вопрос, почему таким вариантом не работает?
https://jsfiddle.net/ue86xrqe/11/

[Ingernirated]

И можно ли как-то записать в переменную текст не в одну строку?
например

var x = "
hello;
putin;
";

Answer 2

[anamorph]

https://learn.javascript.ru/styles-and-classes#стр...

var div = document.querySelector(".lightblue");
div.style.cssText = "background-color:lightblue; \
width:100px;  height:100px;"

Comments

[Ingernirated]

спасибо, подскажи пожалуйста, в чём ошибка?
https://jsfiddle.net/ue86xrqe/11/

[anamorph]

Ошибка во-первых, в том, что кавычки и знак равно в твоем массиве не нужны. Ты передаешь строку в таком виде, в котором она должна выглять как в CSS
Во-вторых твой цикл не имеет никакого смысла. Ты просто прибавляешь к какой-то строке другую строку, которые нигде не используешь
Вот пример рабочего кода

var div = document.querySelector(".lightblue");

var style = [
	"background-color:lightblue;",
    "width:100px;",
    "height:100px;",
];
var strDivStyle = "";
for(var i = 0; i < style.length; i++) {
	strDivStyle += style[i];
}
div.style.cssText = strDivStyle;

[anamorph]

хотя наверное, все же правильнее будет написать
var strDivStyle = div.style.cssText;

[Ingernirated]

anamorph: может я вас не правильно понял, но вот
https://jsfiddle.net/ue86xrqe/12/

[anamorph]

div - это у тебя дом элемент. А ты прибавляешь к нему строку. Это не верно

[Ingernirated]

anamorph: тысяча извинений, один в один с вашего примера написал, но ничего
https://jsfiddle.net/ue86xrqe/13/

[anamorph]

да где ж один в один. Первая строчка. Так не делается. В первой вы только находите нужный дом-элемент. Нужно всего-то переставить ".style.cssText" в последнюю строчку, чтобы получилось "div.style.cssText = x;" и все заработает

[Ingernirated]

anamorph: если не задавать div = document.querySelector(".lightblue").style.cssText;
а просто div = document.querySelector(".lightblue");
а уже потом div.style.cssText += style[i];
то всё работает, почему так?

[Ingernirated]

anamorph:
https://jsfiddle.net/ue86xrqe/14/
не рабочий
https://jsfiddle.net/ue86xrqe/15/
рабочий
Почему нельзя в переменную задать var red = div.style.css и задать red = ...?

[anamorph]

я вам сто процентов точно ответить не смогу, но я так думаю, что это связанно с асинхронностью языка. Дело в том, что методы выполняются не друг за другом, а кто первее, и так как поиск выполняется дольше, чем запрос стиля, то выходит, что стиль мы запрашиваем у undefined

[Ingernirated]

anamorph: спасибо огромное!

[anamorph]

а насчет второго вопроса, нерабочий код станет рабочим, если допишите внизу
div.style.cssText = divStyle
дело в том, что во второй строчке вы присваиваете переменной divStyle пустую строку, ведь div.style.cssText содержит в себе ничто иное как строку с уже имеющимися стилями
но далее, после цикла, divStyle никуда не присваивается, div.style.cssText не меняется, и соответственно изменений нет