Question

为什么这不起作用？我想点击一个按钮来显示＆＃34; nav＆＃34;，然后点击＆＃34; nav＆＃34;被阻止了＆＃34;移动＆＃34;将文本对齐到中心。

我知道我可以将文字对齐＆＃34;移动＆＃34;使用相同的按钮，但这不是我想要的。

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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;

Answer 1

尝试使用，这样就可以强制#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";
  }

更多info on style property can be found here。

Answer 2

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";
  }
});

JavaScript样式div基于另一个div的样式[帮助]

2 个答案: