實際上，我正在學習 DOM 操作。如您所見，我創建了 li 元素，但問題是它沒有將 fontSize 應用于 li。
const title = document.querySelector("#main-heading");
title.style.color = "red";
const listItems = document.querySelectorAll(".list-items");
for (i = 0; i < listItems.length; i ) {
listItems[i].style.fontSize = "2rem";
}
const ul = document.querySelector("ul");
const li = document.createElement("li");
ul.append(li);
li.innerText = "X-men"
li.setAttribute('class' , 'list-items' )
<div class="container">
<h1 id="main-heading">Favourite Movie</h1>
<ul>
<li class="list-items">The Matric</li>
<li class="list-items">Star Wars</li>
<li class="list-items">Harry Potter</li>
<li class="list-items">Lord of the Rings</li>
<li class="list-items">Marvel</li>
</ul>
</div>uj5u.com熱心網友回復：
你做事的順序很重要。
- 你找到所有匹配的專案
.list-items - 你改變他們的字體大小
- 您創建一個匹配的新串列項
.list-items
當您在第 1 步執行搜索時，您在第 3 步創建的專案不存在，因此不會被第 2 步更改。
使用樣式表而不是行內樣式（這是您使用...style.fontSize.
uj5u.com熱心網友回復：
for洗掉在回圈內設定字體大小值。而是將其作為單獨的 css。
.list-items {
font-size: 2rem;
}
添加類后追加新創建li的。
ul.append(li);
分叉示例：
const title = document.querySelector("#main-heading");
title.style.color = "red";
const listItems = document.querySelectorAll(".list-items");
const ul = document.querySelector("ul");
const li = document.createElement("li");
li.innerText = "X-men"
li.setAttribute('class' , 'list-items');
ul.append(li);.list-items {
font-size: 2rem;
}<div class="container">
<h1 id="main-heading">Favourite Movie</h1>
<ul>
<li class="list-items">The Matric</li>
<li class="list-items">Star Wars</li>
<li class="list-items">Harry Potter</li>
<li class="list-items">Lord of the Rings</li>
<li class="list-items">Marvel</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/534767.html