一个简单的样式

需求：

1、通过查询行的添加，左边的栏目随着变动；
2、点击左边的文字可进行切换模式
\

代码：

1、布局部分

<div style="display: flex; justify-content: flex-start;">
<div
style="display: flex; width: 80px; background-color: antiquewhite; justify-content: flex-end; align-items: center;">
<div
style="display: flex; width: 50px; height: calc(100% - 50px); border-left: 1px solid black; border-top: 1px solid black;border-bottom: 1px solid black;align-items: center;">
<div id="hello"
style="font-size: 16px; border: 1px solid black; background-color: antiquewhite; padding: 2px; margin-left: -10px;"
value="1" onclick="clickExchange()">或</div>
</div>
</div>
<div id="data">
<div class="data">数据</div>
</div>
</div>

2、简单的样式

<style>
.data {
margin-left: 20px;
width: 100%;
height: 50px;
line-height: 50px;
background-color: red;
}
</style>

 

3、js操作部分

<script>
let count = 0;
function clickExchange() {
count++;
const node = document.getElementById("hello")
const text = node.getAttribute("value")
console.log(text)
if (text == "1") {
node.innerText = '并'
node.setAttribute("value", "2")
} else {
node.innerText = '或'
node.setAttribute("value", "1")
}


const data = document.getElementById("data")
const newDiv = document.createElement("div")
newDiv.className = "data"
newDiv.innerText = "数据" + count;
data.appendChild(newDiv)
}
</script>