查找我正在动态创建的元素的样式属性

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()，例如：

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>

我们得到正确的高度为200px，因为我们已经使用console.log( myNewElmt.style.height ); 设置了内联高度，但是myNewElmt.style.height = '200px';返回了空字符串，因为使用class和myNewElmt.style.width在此处设置了宽度，我们可以访问window.getComputedStyle(myNewElmt)正确。

Answer 2

您可以为元素设置属性

width

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