如何在 JavaScript 中應用 display: flex 和 flex-direction: row？

Question

我想使用以下代碼應用display: flex和flex-direction: row ：

<ul id="myList"></ul>
<script type="text/javascript">
  const listItem = document.getElementById("myList");
  const fruits = ["Banana", "Papaya", "Mango", "Lemon"];

  for (let fruit of fruits) {
    let list = document.createElement("li");
    list.textContent = fruit;
    list.classList.add("dcode");
    listItem.appendChild(list);
  }
</script>

Answer 1

將 styles 分配給您選擇的父元素：

 listItem.style.display = 'flex'; listItem.style.flexDirection = 'row'

您也可以一次分配它們：

 listItem.style.cssText = "display: flex; flex-direction: row";

Answer 2

只需為列表項元素父級添加 a.style 並分配一些 cssText 以供顯示。 在我的示例中，我使用.style.cssText

 const listItem = document.getElementById("myList"); const fruits = ["Banana", "Papaya", "Mango", "Lemon"]; for (let fruit of fruits) { let list = document.createElement("li"); list.textContent = fruit; list.classList.add("dcode"); listItem.appendChild(list); listItem.style.cssText = 'display: flex; flex-direction: row; list-style-Type: none;' }

 <ul id="myList"></ul>