Làm cách nào để getElementByClass thay vì GetElementById bằng JavaScript?

Question 1

Tôi đang cố gắng chuyển đổi khả năng hiển thị của các phần tử DIV nhất định trên trang web tùy thuộc vào loại của từng DIV. Tôi đang sử dụng một đoạn mã JavaScript cơ bản để chuyển đổi chúng. Vấn đề là tập lệnh chỉ sử dụng getElementById, vì getElementByClasskhông được hỗ trợ trong JavaScript. Và rất tiếc, tôi phải sử dụng lớp chứ không phải id để đặt tên cho các DIV vì tên DIV được tạo động bởi biểu định kiểu XSLT của tôi bằng cách sử dụng một số tên danh mục nhất định.

Tôi biết rằng một số trình duyệt hiện hỗ trợ getElementByClass, nhưng vì Internet Explorer không hỗ trợ nên tôi không muốn đi theo con đường đó.

Tôi đã tìm thấy các tập lệnh sử dụng các hàm để lấy các phần tử theo lớp (chẳng hạn như # 8 trên trang này: http://www.dustindiaz.com/top-ten-javascript/ ), nhưng tôi không thể tìm ra cách tích hợp chúng với kịch bản chuyển đổi của tôi.

Đây là mã HTML. Bản thân các DIV bị thiếu vì chúng được tạo khi tải trang bằng XML / XSLT.

Câu hỏi chính: Làm cách nào để tải tập lệnh Toggle dưới đây để nhận Phần tử theo Lớp thay vì nhận Phần tử theo 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

Các trình duyệt hiện đại có hỗ trợ cho document.getElementsByClassName. Bạn có thể thấy sự phân hủy hoàn toàn trong đó các nhà cung cấp cung cấp chức năng này tại caniuse . Nếu bạn đang tìm cách mở rộng hỗ trợ cho các trình duyệt cũ hơn, bạn có thể muốn xem xét một công cụ bộ chọn giống như trong jQuery hoặc một polyfill.

Câu trả lời cũ hơn

Bạn sẽ muốn kiểm tra jQuery , điều này sẽ cho phép những điều sau:

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

Google cung cấp tệp nguồn jQuery được lưu trữ, vì vậy bạn có thể tham khảo tệp này và có thể chạy ngay lập tức. Bao gồm những điều sau trong trang của bạn:

<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

Các getElementsByClassNamephương pháp hiện nay natively hỗ trợ bởi hầu hết các phiên bản gần đây của Firefox, Safari, Chrome, IE và Opera, bạn có thể làm một chức năng để kiểm tra xem một triển khai nguồn gốc có sẵn, nếu không sử dụng phương pháp 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);
  }
}

Sử dụng:

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

Thông thường bằng cách sử dụng getElementsByClassName, nó trả về một mảng gồm nhiều lớp. Bởi vì cùng một tên lớp có thể được sử dụng trong nhiều trường hợp bên trong cùng một trang HTML. Chúng tôi sử dụng id phần tử mảng để nhắm mục tiêu lớp chúng tôi cần, trong trường hợp của tôi, đó là trường hợp đầu tiên của tên lớp đã cho. Vì vậy, tôi đã sử dụng [0]

Question 5

Sử dụng nó để truy cập lớp trong Javascript.

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

Question 6

thêm vào câu trả lời của CMS , đây là một cách tiếp cận chung chung hơn toggle_visibilitymà tôi vừa sử dụng:

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

Giải pháp của tôi:

Đầu tiên, hãy tạo các thẻ "<style>" với một ID.

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

Sau đó, tôi tạo một hàm trong JavaScript như sau:

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

Làm việc như một cái duyên đối với tôi.

Question 8

Nối ID vào khai báo lớp

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