'display'スタイル属性が正しくありません

Question

divのdisplayスタイル属性を確認する必要があります。下の文書では、両方のdivの 'display属性は、ボタンをクリックしたときにCSSで設定します（none、もう1つはblock）。div.style.displayはスクリプトで設定されていない限り空です正しい値を得るために、ボタンを2回クリックする必要があります）。

function myFunction() { 
 
    document.getElementById("dispa").innerHTML = document.getElementById("mydiva").style.display; 
 
    document.getElementById("mydiva").style.display = "none"; 
 
    document.getElementById("dispb").innerHTML = document.getElementById("mydivb").style.display; 
 
    document.getElementById("mydivb").style.display = "none"; 
 
}

 #mydiva { 
 
     display:block; 
 
     } 
 
     #mydivb { 
 
     display:none; 
 
     }

<button onclick="myFunction()" id="b">See</button> 
 
<p id="dispa">display</p> 
 
<div id="mydiva"> 
 
    sample div a 
 
</div> 
 
<p id="dispb">display</p> 
 
<div id="mydivb"> 
 
    sample div b 
 
</div>

注：私のプロジェクトでは、displayの読み取りがないボタンを押して、window.onloadに起こることですが、結果は同じです。

Answer 1

は、あなたは下の関数を使ってdisplayスタイルを取得することができます

function myFunction() { 
 
    document.getElementById("dispa").innerHTML = getDisplayStyle("mydiva"); 
 
    document.getElementById("mydiva").style.display = "none"; 
 
    document.getElementById("dispb").innerHTML = getDisplayStyle("mydivb"); 
 
    document.getElementById("mydivb").style.display = "none"; 
 
} 
 

 
function getDisplayStyle(elementId) { 
 
    var element = document.getElementById(elementId) 
 
    return element.currentStyle ? element.currentStyle.display : 
 
    getComputedStyle(element, null).display; 
 
}

#mydiva { 
 
    display: block; 
 
} 
 
#mydivb { 
 
    display: none; 
 
}

<button onclick="myFunction()" id="b">See</button> 
 
<p id="dispa">display</p> 
 
<div id="mydiva"> 
 
    sample div a 
 
</div> 
 
<p id="dispb">display</p> 
 
<div id="mydivb"> 
 
    sample div b 
 
</div>

Answer 2

<p id="dispa">display</p> 
<div id="mydiva" style="display:none;"> 
    sample div a 
</div> 
<p id="dispb">display</p> 
<div id="mydivb"> 
    sample div b 
</div> 




<script> 
$(document).ready(function(){ 
    $("#b").click(function(){ 
     $("#mydiva").toggle(); 
     $("#mydivb").toggle(); 
    }); 
}); 
</script> 

これはあなたのやりたいことですか？