Bagaimana cara getElementByClass daripada GetElementById dengan JavaScript?

Question 1

Saya mencoba mengubah visibilitas elemen DIV tertentu di situs web tergantung pada kelas masing-masing DIV. Saya menggunakan cuplikan JavaScript dasar untuk mengaktifkannya. Masalahnya adalah bahwa skrip hanya digunakan getElementById, karena getElementByClasstidak didukung di JavaScript. Dan sayangnya saya harus menggunakan class dan bukan id untuk memberi nama DIV karena nama DIV dihasilkan secara dinamis oleh stylesheet XSLT saya menggunakan nama kategori tertentu.

Saya tahu bahwa browser tertentu sekarang mendukung getElementByClass, tetapi karena Internet Explorer tidak, saya tidak ingin pergi ke rute itu.

Saya telah menemukan skrip yang menggunakan fungsi untuk mendapatkan elemen berdasarkan kelas (seperti # 8 di halaman ini: http://www.dustindiaz.com/top-ten-javascript/ ), tetapi saya tidak tahu cara mengintegrasikannya dengan skrip toggle saya.

Berikut kode HTML-nya. DIV itu sendiri hilang karena dibuat pada pemuatan halaman dengan XML / XSLT.

Pertanyaan Utama: Bagaimana cara mendapatkan skrip Toggle di bawah ini untuk mendapatkan Elemen menurut Kelas daripada mendapatkan Elemen berdasarkan ID?

<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>

Question 2

Peramban modern memiliki dukungan untuk document.getElementsByClassName. Anda dapat melihat rincian lengkap vendor mana yang menyediakan fungsionalitas ini di caniuse . Jika Anda ingin memperluas dukungan ke browser lama, Anda mungkin ingin mempertimbangkan mesin pemilih seperti yang ditemukan di jQuery atau polyfill.

Jawaban yang Lebih Lama

Anda akan ingin memeriksa ke jQuery , yang memungkinkan yang berikut ini:

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

Google menawarkan file sumber jQuery yang dihosting, sehingga Anda dapat mereferensikannya dan segera siap. Sertakan yang berikut di halaman Anda:

<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>

Question 3

The getElementsByClassNameMetode sekarang native didukung oleh versi terbaru dari Firefox, Safari, Chrome, IE dan Opera, Anda bisa membuat fungsi untuk memeriksa apakah implementasi asli tersedia, jika tidak menggunakan metode 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);
  }
}

Pemakaian:

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';
     }
  }
}

Question 4

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

Sebenarnya dengan menggunakan getElementsByClassName, ini mengembalikan array dari beberapa kelas. Karena nama kelas yang sama dapat digunakan di lebih dari satu contoh di dalam halaman HTML yang sama. Kami menggunakan id elemen array untuk menargetkan kelas yang kami butuhkan, dalam kasus saya, ini adalah contoh pertama dari nama kelas yang diberikan. Jadi saya telah menggunakan [0]

Question 5

Gunakan untuk mengakses kelas dalam Javascript.

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

Question 6

menambahkan ke jawaban CMS , ini adalah pendekatan yang lebih umum yang toggle_visibilitybaru saja saya gunakan sendiri:

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';
       }
     }
  }
}

Question 7

Solusi saya:

Pertama buat tag "<style>" dengan ID.

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

Kemudian, saya membuat fungsi di JavaScript seperti ini:

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

Bekerja seperti pesona bagi saya.

Question 8

Tambahkan ID di deklarasi kelas

.aclass, #hashone, #hashtwo{ ...codes... }
document.getElementById( "hashone" ).style.visibility = "hidden";