0

現在のcssスタイルを見つけるためにjavascriptを使用する必要がありますが、divが開かれる前です。

私のコードは以下のとおりです: これは、実際の div (slidingDiv) の開始の下に追加すると機能します

ただし、表示されるボタンを制御するために使用されるため、div の前に動作させる必要があります。div を表示するか非表示にするかによって、異なるボタンが表示されます。

どうもありがとう

ピート

<script>
if(document.getElementById('slidingDiv').style.display == 'none') alert('none');
else alert('show');
</script>
4

2 に答える 2

2

ソースの順序で が表示される前に JavaScript コード ブロックを記述する必要がある場合は<div>、JavaScript を にアタッチして延期しますwindow.onload。

<script>
    window.onload = function() {
        if (document.getElementById('slidingDiv').style.display == 'none') {
            alert('none');
        }
        else {
            alert('show');
        }
    };
</script>
<div id="slidingDiv"></div>

jQuery を使用している場合は、さらに簡単です。

<script>
    $(document).ready(function() {
        if ($('#slidingDiv').not(':visible')) {
            alert('none');
        }
        else {
            alert('show');            
        }
    });
</script>
<div id="slidingDiv"></div>

ベスト プラクティスは、すべての JavaScript ファイルをページの下部に配置して、ページが最初にコンテンツをロードし、次にプログレッシブ エンハンスメントを後でロードすることです。そうしないと、ロード中にページのロードが完了するまで待機する必要があります派手な JavaScript 効果。

于 2012-12-20T12:46:03.910 に答える
0

「display: none;」を使用して CSS の両方のボタンを非表示にするだけです。あなたのslideDivとボタンの下にあなたのコードを入れてください。

本当にすべきことは、DOM の準備ができていることを確認することです (そうすれば、JavaScript コードをどこにでも配置できます。もちろん、ページの下部にあるはずです)。

自分で domready を書きたくない場合や、ページに jquery を含めたくない場合は、非常にスマートな domready 実装があります。たとえば、次のようになります。

次のように使用します。

domready(function () {
  if (document.getElementById('slidingDiv').style.display == 'none') {
    alert('none');
  }
  else {
    alert('show');
  }
});

編集:あなたのhtmlに何かを追加するには、innerHTMLを設定するだけです

domready(function () {
  var appendDiv = document.getElementById('someDivToAppend');
  if (document.getElementById('slidingDiv').style.display == 'none') {
    appendDiv.innerHTML('<p>hidden</p>');
  }
  else {
    appendDiv.innerHTML('<p>shown</p>');
  }
});

または、 document.createElement、appendChild -wayを使用できます

domready(function () {
  var appendDiv = document.getElementById('someDivToAppend')
    , newElement = document.createElement('div')

  if (document.getElementById('slidingDiv').style.display == 'none') {
    newElement.text = 'hidden';
  }
  else {
    newElement.text = 'shown';
  }
  appendDiv.appendChild(newElement);
});

MDN-DOCSを使用してください!

于 2012-12-20T12:52:52.180 に答える