Javascriptを使用してdivの表示スタイルプロパティを変更します

divのstyleプロパティを変更してbtnのdiv onclickを表示しようとしています。しかし、私はそのdivの表示プロパティを読み取ることができません。スクリプトがwindow.onloadの後にトリガーされるように、divがロードされる前にスクリプトが値を取得しようとしているため、コードが機能しないところがあります。ウィンドウがロードされた後で、ボタンがクリックされたときにのみスクリプトを動作させるにはどうすればよいですか？Javascriptを使用してdivの表示スタイルプロパティを変更します

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#hidden-div{ 
display: none; 
} 
</style> 
<script type="text/javascript"> 
function showMe() { 
    var foo = document.getElementById('hidden-div'); 
    alert(foo.style.display); //this gives a blank alert 

    if(foo.style.display == ''){ 
    foo.style.display = 'block'; 
    } 
    else { 
    foo.style.display == 'none'; 
    } 
} 
</script> 
</head> 
<body> 
    <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br> 

    <div id="hidden-div"> 

    <input type="checkbox" id="check-1"> Check 1</input> 
    <br> 
    <input type="checkbox" id="check-2"> Check 2</input> 
    <br> 
    <input type="checkbox" id="check-3"> Check 3</input> 

    </div> 
</body> 
</html>

出典

2016-09-02 Etherealm

no' 'タグがあります。入力は自己閉鎖です – j08691

'=='は比較のため、 '='は代入のためのものです。 – Li357

は昇華で含まれていました。気づかなかった – Etherealm

注意して何か：==は=が割り当てにあり、比較のためのものです。また、入力終了タグもありません。ここでは、完成抜粋です：私はまた、いくつかのロジックを変更し

function showMe() { 
 
    var foo = document.getElementById('hidden-div'); 
 

 
    if(foo.style.display == '' || foo.style.display == 'none'){ 
 
     foo.style.display = 'block'; 
 
    } 
 
    else { 
 
     foo.style.display = 'none'; 
 
    } 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <input type="button" id="btn-me" onclick="showMe()">+ clicking here should display the checkboxes</input><br> 
 

 
    <div id="hidden-div" style="display:none;"> 
 

 
    <input type="checkbox" id="check-1"> Check 1 
 
    <br> 
 
    <input type="checkbox" id="check-2"> Check 2 
 
    <br> 
 
    <input type="checkbox" id="check-3"> Check 3 
 

 
    </div> 
 
</body> 
 
</html>

。 displayがnoneでボタンがクリックされている場合は、表示を切り替えます。 displayがnoneでない場合は、noneにします。

事はelement.style.<style>はスタイルがインラインに設定されている場合にのみアクセス可能です。

出典

2016-09-02 19:47:17 Li357

'CSSStyleDeclaration'オブジェクト内のアクティブなスタイルを返す' getComputedStyle'を使って要素スタイルを取得する方が良いでしょう。 – Hydro

もちろん、デモンストレーションの目的では、 'element.style。

Javascriptを使用してdivの表示スタイルプロパティを変更します

答えて