3

同様の投稿を読んだことがありますが、HTMLにクラスを追加してやりたいことを実行するように書かれている場所しか見つけられなかったので、基本的にボタンがあり、クリックするとすべてのコードHTMLタグが非表示になり、クリックするとそれは再びそれらを示しています。ページにたくさんのコード タグがあるので、それぞれにクラスを追加するにはかなりの時間がかかります。私はいくつかのことを試してきました

if(document.getElementsByTagName("CODE").style.display === "block"){
document.getElementsByTagName("CODE").style.display = "none"
}

そしてその周りの何か、すべて似たようなコードですが、それらはすべてブラウザをクラッシュさせるか、動作させませんでした. 私の質問は、クラス名を使用して、上記のコードで「行った」ように、すべてのタグの表示コンテンツを比較できるクラス名を確認する必要があるかどうかです。（各要素の for ループでループしている可能性がありますが、それも試してみましたが、結果はありませんでした。）これまでのわずかな知識で可能な限りのことを試しました（私はまだ javascript を勉強しています）。本当に高度なことをしようとしているのか、それともどうすればよいのかわかりません。

ありがとう、私はこのような別の質問がなかったといいのですが、私は提案されたものをすべて読んだことがあります.

彼らは皆、クラスを追加することを推奨しているので、本当に不可能なことをしようとしているような気がします. 私はまだjQueryに興味がないので、それについて話さないでください、ありがとう。(最初に良い JavaScript を学ぶ必要があります)

4

3 に答える 3

3

の結果を反復処理する必要がありdocument.getElementsByTagName("CODE")ます。これは配列のような変数です。.css()これは、オブジェクトのリストに書き込み、それらをすべて処理できるようにする jQuery 機能です。次のようなものが必要です

ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
   ar[i].style.display = "none";

可視性を切り替える必要がある場合はcode、このコードを使用してください

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible
   {
      ar[i].style.display = "none";
   } 
   else
   {
      ar[i].style.display = "block"; //If you need to make it block explicitly, otherwise ""
   } 
}

style.displayプロパティは最初は空で、デフォルトでinlineforcodeタグですが、他の値に明示的に設定できることに注意してください。にリセットすると''、状態が復元されます。

表示モードを変更せずに可視性を前後に変更する必要がある場合は、以前のモードを保存する必要があります (codeタグはモードのみで表示できませんblock)。次のように実行できます。

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible, "" or "blocK" or some other value
   {
      ar[i].saved_display = ar[i].style.display; //Save the display mode to a new property of the tag
      ar[i].style.display = "none"; //And hide the element
   } 
   else
   {
      if (typeof ar[i].saved_display === "undefined") //It's the first time we see the element. Display it in default mode
         ar[i].style.display = "";
      else
         ar[i].style.display = ar[i].saved_display; //We know how the element was shown before we hid it, restoring
   } 
}
于 2013-06-02T22:07:13.597 に答える
1

Aneri が言うように、getElementsByTagNameは、インデックスで反復できるNodeListを返します。

displayプロパティは、明示的に設定されている場合にのみ値を持ち、CSS から値を継承しないため、次のようなことを行う必要があります。これにより、display がnoneに設定されていない場合はすべての CODE 要素が非表示になり、次の場合に表示します。

var element, elements = document.getElementsByTagName("CODE");

for (var i=0, iLen=elements.length; i<iLen; i++) {
  element = elements[i];

  // If element hasn't been hidden, hide it
  if (element.style.display == '') {
    element.style.display = 'none';

  // Otherwise show it
  } else {
    element.style.display = '';
  }
}

要素がデフォルトまたは継承された値に戻るように、表示値を "" (空の文字列) に戻す必要があることに注意してください。これは「ブロック」ではない可能性があります。

また、親要素にdisplay: noneがある場合、子要素は非表示になります。

于 2013-06-02T22:21:33.500 に答える
0

BODYまたは要素だけにクラスを追加し、HTMLコンテキストセレクターなどを介して必要なスタイルをこのクラスに添付できます。例えば：

HTML.hide-code CODE {display: none; }
于 2013-06-02T22:36:08.150 に答える