为什么这不起作用?我想点击一个按钮来显示" nav",然后点击" nav"被阻止了"移动"将文本对齐到中心。
我知道我可以将文字对齐"移动"使用相同的按钮,但这不是我想要的。
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
} else {
nav.style.display = "none";
}
});
if (nav.style.display === "block") {
move.style.textAlign = "center";
}

#nav {
background-color: lightblue;
display: none;
}
li {
display: inline;
}

<div id="nav">
<li>one</li>
<li>two</li>
<li>three</li>
</div>
<div id="move">
<h4>Hello</h4>
</div>
<button id="btn">change</button>
&#13;
答案 0 :(得分:0)
尝试使用,这样就可以强制#nav中的文本在中心对齐。
#nav {
background-color: lightblue;
display: none;
text-align: center;
}
如果您需要根据javascript中的某些条件动态更改内联样式,可以考虑使用style
属性ex来查看dom节点的内联样式:nav.style.display
一个简单的例子:
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
答案 1 :(得分:0)
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
const btn = document.getElementById('btn');
const nav = document.getElementById('nav');
const move = document.getElementById('move');
btn.addEventListener('click', () => {
if (nav.style.display === "none") {
nav.style.display = "block";
move.style.textAlign = "center";
} else {
nav.style.display = "none";
}
});