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

时间:2017-09-27 18:00:08

标签: javascript html css

为什么这不起作用?我想点击一个按钮来显示" 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;
&#13;
&#13;

2 个答案:

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

更多info on style property can be found here

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