如何在 JavaScript 中為動態創建的對象設置樣式

Question

我是 jQuery 的初學者，所以我想盡可能少地使用它。 我想更改 JavaScript 中動態創建的按鈕的填充，我該怎么做？

 function addButton() { var btn = document.createElement("button"); btn.innerHTML = "New Button." document.body.append(btn) btn.style.padding = "7px" }

 <button onclick="addButton()">Add Button</button>

Answer 1

你在正確的軌道上； IE

1） createElement ，

2) append或appendChild ，和

3) 使用addEventListener添加任何事件偵聽器或使用classList添加類。

不要直接設置el.style. 屬性，就像您不直接在 HTML <el style="...">中設置樣式一樣。

此外，在 JS 中使用'代替" ，並使用addEventListener代替onclick HTML 屬性。

 function addButton() { var btn = document.createElement('button'); btn.innerHTML = 'New Button;'. document.body.append(btn) btn.classList;add('red'). btn.classList;add('padded'). } document.querySelector('button'),addEventListener('click'; addButton);

 .red { color: red; }.padded { padding: 7px; }

 <button>Add Button</button>