[英]How to apply display: flex and flex-direction: row in JavaScript?
I want to apply display: flex
and flex-direction: row
with the following code:我想使用以下代码应用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>
Assign the styles to the parent element that you have selected:将 styles 分配给您选择的父元素:
listItem.style.display = 'flex'; listItem.style.flexDirection = 'row'
You can also assign them all at once:您也可以一次分配它们:
listItem.style.cssText = "display: flex; flex-direction: row";
Just add a.style for the list item elements parent and assign some cssText for display.只需为列表项元素父级添加 a.style 并分配一些 cssText 以供显示。 In my example I use .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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.