JavaScriptスタイルのdivは他のdivのスタイルに基づいています[ヘルプ]

Question

これはなぜ機能しませんか？ボタンをクリックして「ナビ」を表示し、「ナビ」がブロックされている場合、「移動」がテキストに合わせて中央に配置されます。

私は同じボタンで「移動」することができますが、それは私が探しているものではありません。

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>

Answer 1

あなたが中央に整列する#nav内のテキストを強制的にこのような方法で、使用してみてください。あなたはstyleプロパティEXを使用して、DOMノードのインラインスタイルを見て検討することもでき、JavaScriptでいくつかの条件に基づいて動的にインラインスタイルを変更する必要がある場合

#nav { 
    background-color: lightblue; 
    display: none; 
    text-align: center; 
} 

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