Как правильно описать функцию, применения CSS свойств к элементам HTML разметки?

Question

[Muranx]

Привет всем, цель, создать простенькую функцию, чтобы брать CSS свойства из объектов, и применять их к определённым элементом HTML разметки:
HTML :

<div class="some" id="some">
  
</div>

CSS :

.some{
  width: 100px;
  height: 100px;
}

Не рабочий на данный момент JS код :

var out=document.getElementById("some");

var oneStyle={
  backgroundColor: "gray"
};

function change(id, obj){
  for(var k in obj){
    ///НЕРАБОТАЮЩИЕ ВАРИАНТЫ///
    // id.style.k=obj[k]
    // id.style+k=obj[k]
    // (id+"."+style+"."+k)=String(obj[k])
    // (id+".style."+k)=obj[k]
    
    ///РАБОТАЕТ, НО ОФК НЕ ПОДХОДИТ. т.к. свойст же может быть не одно///
    // id.style.backgroundColor=obj[k]
  }
};

change(out, oneStyle)

В общем главная загвоздка у меня в этой самой индексной переменной k(ведь эта переменная является названием свойства объекта, её тип это строка), ну и взаимодействию этой переменной с id.style! Задача вроде бы банальнейшая, но вот что уже только не перепробовал, даже до абсурдных вариантов доходило. Ответ просьба писать на примере именно моей функции, не нужно создавать ваши варианты( хотя критика и предложения приветствуются, НО только после представленного решения ), т.к. меня интересует модификация именно моего примера! Спасибо!

Answer 1

[Дмитрий Сергеев]

Чтобы манипулировать "элементами HTML разметки", нужно дождаться их загрузки. В этом нам поможет событие DOMContentLoaded, на которое мы подпишемся с помощью addEventListener

var oneStyle={
  backgroundColor: "lime"
};

function change(el, obj)
{
  for(var k in obj)
  {
  	el.style[k] = obj[k];
  }
}

document.addEventListener("DOMContentLoaded", function(event) { 
	var el = document.getElementById("some");
	change( el, oneStyle )
});

Comments

[Muranx]

Хм, друг, если честно мне нужно было только el.style[k] вот этот ключ!) Попробовал вставить в свою функцию, всё работает прекрасно! ХМ, насчёт твоего поста, я всё понял, НО у меня всё работает и без addEventListener( ), т.е. судя по всему потому-что у меня скрипт стоит после HTML (хотя я могу ошибаться)! Так или иначе, ты мне помог, сейчас у меня будет ещё небольшой вопросик к тебе в виде комментария, так что не убегай далеко!

[Muranx]

А ты можешь объяснить мне , почему не срабатывал вызов el.style.k, хотя если на прямую указать свойство через ., как в el.style.backgroundColor всё работало. . . ? Это получается именно такой внутренний синтаксис цикла for(. . . in . . .)?

[Шохрух Шаймардонов]

Muranx, потому что через "elem.style." можно обращаться к свойствам css, которые имеются. Следовательно, "el.style.backgroundColor" обращается к свойству "background-color", а "el.style.k" - к некому свойству "k"

[Muranx]

Шохрух Шаймардонов, =/ но у свойства "k" же есть значение, я предпологал, что оно и будет подставляться

[Шохрух Шаймардонов]

Muranx, все верно. у него есть все. Но! обращение к el.style и .some-opt означает что после "style." вы обращаетесь напрямую к свойству css а не записываете неким переменным.
Можете здесь немного поизучать.

[Muranx]

Шохрух Шаймардонов, круто, спасибо, все равно не вижу раздницы между k и [k]! Ладно буду разбираться, быть может ljs.ru поможет

[Дмитрий Сергеев]

Muranx,
> судя по всему потому-что у меня скрипт стоит после HTML (хотя я могу ошибаться)!
Именно поэтому. И если вам вдруг понадобиться грузить скрипт в "head" то он работать не будет, когда как при использовании событий скрипт будет работать в любом случае. Но тут уж как вам удобней.

> почему не срабатывал вызов el.style.k
если по простому,
потому что это не вызов а обращение к некому свойству под названием "k" объекта "style" объекта "el"
когда как el.style[k] - обращение к некому свойству с названием, которое равно переменной "k", объекта "style" объекта "el"

[Muranx]

Дмитрий Сергеев, хм, ну наверное я тебя правильно понял, что opacity, backgroundColor, width, height, border - это всё свойства объекта style?

[Дмитрий Сергеев]

Muranx, ну да. сделайте console.log(el.style) и в консоли увидите объект со всяческими свойствами.

но у вас же изначально вопрос был в другом, а именно

....
var k = 'backgroundColor'
el.style.k = 'red' // почему не устанавливается красный цвет фона? Потому что таким образом вы задали новое свойство с именем 'k' равное 'red', а не цвет фона задали
....

P.S. Попробуйте вот это https://learn.freecodecamp.org/javascript-algorith... для начала

[Muranx]

Дмитрий Сергеев, пхах, так меня ещё не опускали! ;D

[Дмитрий Сергеев]

Muranx, просто у вас очень странные вопросы по js, даже для новичка.

[Muranx]

Дмитрий Сергеев, =//