Найти свойства стиля элемента, который я создаю динамически

Question

Если у меня стиль CSS:

.myClass {
    width: 1234px;
}

И элемент, который я добавляю динамически с помощью JS, таким образом:

document.onload = function(){
    myParent = document.getElementById("parent");
    let myNewElmt = document.createElement("div");
    myNewElmt.className = "myClass";
    myParent.appendChild(MyNewElmt);
    console.log(myNewElmt.style.width);//expect "1234px" returns ""
}

Я не могу получить доступ к стилю свойства. Он отображается нормально, и если я впоследствии посмотрю на myNewElmt.style.width, скажем, в функции document.onmousedown, он работает, но не при его создании.

Как мне получить доступ к стилям css динамически создаваемого элемента, в момент его создания?

Answer 1

Обратите внимание, что element.style.propName используется только для доступа к свойствам встроенного стиля, которые мы установили с помощью атрибута style, например:

<div style="height: 200px;">

Для доступа к значению свойства CSS, которое мы установили с помощью имена классов, нам нужно использовать getComputedStyle(), например:

let compStyles = window.getComputedStyle(myNewElmt);
console.log( compStyles.width );

Рабочая демонстрация:

myParent = document.getElementById("parent");
let myNewElmt = document.createElement("div");

myNewElmt.style.height = '200px';       // Set iniline height here
myNewElmt.className = "myClass";
myParent.appendChild(myNewElmt);

console.log( myNewElmt.style.height );  // Returns 200px
console.log( myNewElmt.style.width );   // Returns ''

let compStyles = window.getComputedStyle(myNewElmt);
console.log( compStyles.width );        // Returns 1234px

.myClass { width: 1234px; }

<div id="parent"></div>

Пояснение:

В этой демонстрации вы можете увидеть, используя:

console.log( myNewElmt.style.height );

мы получаем правильную высоту как 200 пикселей, поскольку мы установили встроенную высоту с помощью myNewElmt.style.height = '200px';, но myNewElmt.style.width возвращает пустую строку, поскольку ширина задается здесь с помощью класса и с помощью window.getComputedStyle(myNewElmt) мы можем получить доступ к width правильно.

Answer 2

Вы можете установить атрибут для своего элемента

yourElement.setAttribute("class", "nameClass");

или classList()