使用 javascript 設置屬性

Question

我有：

 const items = document.querySelectorAll('#players li'); console.log(items[0], items[1], items[2]);

 <section id="players"> <h1>Players</h1> <ol> <li>Alice</li> <li>Bob</li> <li>Cesar</li> </ol> </section>

生產：

Players
    1.Alice
    2.Bob
    3.Cesar

現在我想在我的 javascript 文件外部使用 javascript 將整數轉換為羅馬數字，而不是在 HTML 文件中設置數字，如下所示：

<ol type="i">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ol> 

到目前為止，這是我的 Javascript 代碼，但我想將數字轉換為數字：

const items = document.querySelectorAll('#players li');
console.log(items[0], items[1], items[2]);

Answer 1

只需使用type屬性調整您的列表；

 document.querySelector("ol").type = "I"; const items = document.querySelectorAll('#players li'); console.log(items[0], items[1], items[2]);

 <section id="players"> <h1>Players</h1> <ol> <li>Alice</li> <li>Bob</li> <li>Cesar</li> </ol> </section>

Answer 2

您可以只查詢選擇父 'ol'，然后使用 element.style.listStyleType = "upper-roman" 在 Javascript 中更改它的列表樣式。 這應該應用其子元素的樣式。

Answer 3

您可以更改 ol 標簽引用的類型屬性

 const items = document.querySelectorAll('#players li'); document.querySelector("ol").type = "i"; console.log(items[0], items[1], items[2]);

 <section id="players"> <h1>Players</h1> <ol> <li>Alice</li> <li>Bob</li> <li>Cesar</li> </ol> </section>