JavaScript で GetElementById の代わりに getElementByClass を使用するにはどうすればよいですか?

StackOverflow https://stackoverflow.com/questions/1933602

質問

各 DIV のクラスに応じて、Web サイト上の特定の DIV 要素の表示/非表示を切り替えようとしています。これらを切り替えるために基本的な JavaScript スニペットを使用しています。問題は、スクリプトが使用するのは getElementById, 、 として getElementByClass JavaScript ではサポートされていません。そして残念なことに、DIV 名は特定のカテゴリ名を使用して XSLT スタイルシートによって動的に生成されるため、DIV に名前を付けるには ID ではなくクラスを使用する必要があります。

特定のブラウザが現在サポートしていることは知っています getElementByClass, 、しかし、Internet Explorer はそうではないので、私はその道を選びたくありません。

関数を使用してクラスごとに要素を取得するスクリプトを見つけました (このページの #8 など)。 http://www.dustindiaz.com/top-ten-javascript/）、しかし、それらをトグルスクリプトと統合する方法がわかりません。

これが HTML コードです。DIV 自体は、XML/XSLT を使用したページの読み込み時に生成されるため、欠落しています。

主な質問:ID で要素を取得するのではなく、クラスで要素を取得するには、以下の Toggle スクリプトを取得するにはどうすればよいですか?

<html>

<head>

<!--This is the TOGGLE script-->
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

</head>

<!--the XML/XSLT page contents will be loaded here, with DIVs named by Class separating dozens of li's-->

<a href="#" onclick="toggle_visibility('class1');">Click here to toggle visibility of class 1 objects</a>

<a href="#" onclick="toggle_visibility('class2');">Click here to toggle visibility of class 2 objects</a>

</body>
</html>
役に立ちましたか？

解決

最新のブラウザは以下をサポートしています document.getElementsByClassName. 。この機能を提供しているベンダーの完全な内訳は、次の URL で確認できます。 使ってもいいですか. 。サポートを古いブラウザに拡張したい場合は、jQuery やポリフィルにあるようなセレクタ エンジンを検討することをお勧めします。

古い回答

チェックインしたくなるでしょう jQuery, これにより、次のことが可能になります。

$(".classname").hide(); // hides everything with class 'classname'

Google はホストされた jQuery ソース ファイルを提供しているため、それを参照してすぐに稼働できるようになります。ページに次の内容を含めます。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $(".classname").hide();
  });
</script>

他のヒント

の getElementsByClassName このメソッドは、Firefox、Safari、Chrome、IE、Opera の最新バージョンでネイティブにサポートされるようになりました。ネイティブ実装が利用可能かどうかを確認する関数を作成できます。そうでない場合は、Dustin Diaz メソッドを使用します。

function getElementsByClassName(node,classname) {
  if (node.getElementsByClassName) { // use native implementation if available
    return node.getElementsByClassName(classname);
  } else {
    return (function getElementsByClass(searchClass,node) {
        if ( node == null )
          node = document;
        var classElements = [],
            els = node.getElementsByTagName("*"),
            elsLen = els.length,
            pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;

        for (i = 0, j = 0; i < elsLen; i++) {
          if ( pattern.test(els[i].className) ) {
              classElements[j] = els[i];
              j++;
          }
        }
        return classElements;
    })(classname, node);
  }
}

使用法：

function toggle_visibility(className) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

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

document.getElementsByClassName('CLASSNAME')[0].style.display = 'none';

getElementsByClassName を使用すると、実際には複数のクラスの配列が返されます。同じクラス名が同じ HTML ページ内の複数のインスタンスで使用される可能性があるためです。配列要素 ID を使用して、必要なクラスをターゲットにします。私の場合、それは指定されたクラス名の最初のインスタンスです。そのため、[0] を使用しました。

に追加する CMSの答え, 、これはより一般的なアプローチです。 toggle_visibility 私はちょうど自分自身を使用しました：

function toggle_visibility(className,display) {
   var elements = getElementsByClassName(document, className),
       n = elements.length;
   for (var i = 0; i < n; i++) {
     var e = elements[i];

     if(display.length > 0) {
       e.style.display = display;
     } else {
       if(e.style.display == 'block') {
         e.style.display = 'none';
       } else {
         e.style.display = 'block';
       }
     }
  }
}

私の解決策:

まず、ID を持つ「<style>」タグを作成します。

<style id="YourID">
    .YourClass {background-color:red}
</style>

次に、JavaScript で次のような関数を作成します。

document.getElementById('YourID').innerHTML = '.YourClass {background-color:blue}'

私にとっては魔法のように働きました。

Javascript でクラスにアクセスするために使用します。

<script type="text/javascript">
var var_name = document.getElementsByClassName("class_name")[0];
</script>

クラス宣言にIDを追加する

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top