如何从函数外部设置在函数内创建的节点的样式/目标

Question

我希望能够对在函数中创建的div进行样式化(或更改(。然而；改变"；不得在同一功能中制作。假设在函数中创建的变量在该函数的本地范围内，我如何从外部到达创建的div以进行稍后的样式设置(或其他更改(？我曾尝试用querySelector定位节点，但Console返回Uncaught TypeError，因为它找不到变量。

JS中的示例代码：

let container = document.querySelector('.container');
let divClass = document.querySelector('.div-class');
divClass.style = "backgroundColor: green";
container.addEventListener('click', () => {
let createdDiv = document.createElement('div');
container.appendChild(createdDiv);
createdDiv.classList.add('div-class');
})

Answer 1

代码的问题是在创建元素之前就进行了查询。

let container = document.querySelector('.container');
container.addEventListener('click', () => {
let createdDiv = document.createElement('div');
container.appendChild(createdDiv);
createdDiv.classList.add('div-class');
})

let someButton= document.querySelector('.someButton');
someButton.addEventListener('click', () => {
let divClass = document.querySelector('.div-class');
divClass.style.backgroundColor = "green";
})

.container,.someButton{
border:1px solid black;
background:grey;
margin-bottom:4em;
}
.div-class{
height:40px;
width:40px;
border:1px solid red;
}

<div class="container">
container
</div>

<div class="someButton">
someButton
</div>

在这个片段中，对创建的div的访问被放在另一个单击事件中。如果在.container之前单击.someButton，它将创建一个错误，但如果在之后单击，它将工作，因为div将被创建。

Answer 2

您可以在全局范围内创建一个变量，并将稍后创建的div分配给它。

const container = document.querySelector('.container');
// assign sample element to avoid error if new_div is used before assigning.
let newDiv = document.createElement('div'); 
container.addEventListener('click', () => {
let newDiv = document.createElement('div');
container.appendChild(newDiv);
newDiv.classList.add('div-class');
})
newDiv.style = "backgroundColor: green";