![](/img/trans.png)
[英]Create a button to toggle flex-direction between row and column for a style
[英]How to apply display: flex and flex-direction: row in JavaScript?
我想使用以下代码应用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>
将 styles 分配给您选择的父元素:
listItem.style.display = 'flex'; listItem.style.flexDirection = 'row'
您也可以一次分配它们:
listItem.style.cssText = "display: flex; flex-direction: row";
只需为列表项元素父级添加 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.