Javascript check css div表示かどうか

今はdivがあり、インラインスタイルを行っています。ユーザーがボタンをクリックすると、javascript関数が呼び出され、div表示が適切な値に変更されます。しかし、実際に表示されていても表示がブロックされていても、どのように表示を戻し続けるかはどうすればよいでしょうか。はここでここであなたの助けがはるかに高く評価されますJavascript check css div表示かどうか

<div id="divContent" style="display:none;" > 
    </div> 
<button onclick="unhideDiv()">Click This </button>

私のhtmlコードである私のjavascriptのコード

function unhideDiv(){ 
var divDOC=document.querySelector('divContent'); 
var result = document.getComputedStyle(divDOC, '').display; 
if(result=='none'){ 
divDOC.style.display="block"; 
} 
else 
{ 
divDOC.style.display="none"; 
} 

}

です。前もって感謝します！

出典

2017-02-02 QCcccc

を。これを自分で実行したい場合は、変数を使用して状態を保存します。あなたの関数では、変数を切り替えて、その新しい値に基づいてスタイルを設定します。 –

エラーをチェックするには、ブラウザコンソールを開く必要があります。また、 'querySelector（ 'divContent'）'は 'querySelector（ '＃divContent'）'でなければなりません。なぜなら、この質問にjQueryがタグ付けされているからです。 – NewToJS

'Element.style.display'を最初に設定した場合、計算されたスタイルを取得する必要はありません。または0と1を考えてください。 – PHPglue

要素に隠すクラスを与えるのがずっと簡単です。次にjusクラスを切り替えます。

.hide { 
 
    display: none; 
 
}

<button onclick="toggleHide()">Click This</button> 
 
<div id="divContent" class="hide">div</div> 
 

 
<script> 
 
    function toggleHide() { 
 
    document.getElementById('divContent').classList.toggle('hide'); 
 
    } 
 
</script>

出典

2017-02-02 01:15:39

はあなたquerySelector方法で、正しい要素をターゲットにしていることを確認します：

var divDOC = document.querySelector("#divContent");

また、computedStyleを取得するためのコマンドは、だからあなたのコードはこのようなものになるだろうwindow.getComputedStyle()

次のとおりです。

function unhideDiv(){ 
    var divDOC=document.querySelector('#divContent'); 
    var result = window.getComputedStyle(divDOC, '').display; 
    if(result=='none'){ 
     divDOC.style.display="block"; 
    } 
    else 
    { 
     divDOC.style.display="none"; 
    } 
}

出典

2017-02-02 01:14:39 CynePhoba12

div内にいくつかのコンテンツを追加して、それは目に見えて見えません。「

」 – CynePhoba12

私は、このソリューションが好き：ちょうどjQueryの `.toggleを（）`を使用

// external.js 
 
var doc, E; // reuse on other loads 
 
addEventListener('load', function(){ 
 
    
 
doc = document; 
 
E = function(id){ // super easy 
 
return doc.getElementById(id); 
 
} 
 
var bS = E('box').style, d = 1; 
 
E('butt').addEventListener('click', function(){ 
 
    if(d){ 
 
    bS.display = 'none'; d = 0; 
 
    } 
 
    else{ 
 
    bS.display = 'block'; d = 1; 
 
    } 
 
}); 
 

 
});

/* external.css */ 
 
html,body{ 
 
    padding:0; margin:0; 
 
} 
 
.main{ 
 
    width:980px; margin:0 auto; 
 
} 
 
#box{ 
 
    width:100px; height:100px; background:orange 
 
}

<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <link type='text/css' rel='stylesheet' href='external.css' /> 
 
    <script type='text/javascript' src='external.js'></script> 
 
    </head> 
 
<body> 
 
    <div class='main'> 
 
    <div id='box'>test box</div> 
 
    <input type='button' id='butt' value='change display' /> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-02-02 01:55:16 PHPglue

Javascript check css div表示かどうか

答えて

関連する問題