Hướng dẫn javascript get div class value - javascript lấy giá trị lớp div

3

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Câu hỏi là đơn giản. Không sử dụng jQuery ... Làm cách nào để nhận được giá trị của giá trị

var ElementCssClass = document.getElementById("Target").className;
2 trong Div bằng cách sử dụng JavaScript thông thường?

Thanks.

Đã hỏi ngày 23 tháng 3 năm 2011 lúc 6:28Mar 23, 2011 at 6:28

Hướng dẫn javascript get div class value - javascript lấy giá trị lớp div

1

Giả sử HTML này

Như thế này

var ElementCssClass = document.getElementById("Target").className;

Đã trả lời ngày 23 tháng 3 năm 2011 lúc 6:31Mar 23, 2011 at 6:31

Zelliozelliozellio

Phim huy hiệu vàng 29.3k11 gold badge40 silver badges60 bronze badges

0

Nhận tham chiếu đến Div và sử dụng

var ElementCssClass = document.getElementById("Target").className;
3

document.getElementById('someDiv').className

Đã trả lời ngày 23 tháng 3 năm 2011 lúc 6:29Mar 23, 2011 at 6:29

5

Phương thức

var ElementCssClass = document.getElementById("Target").className;
4 của giao diện
var ElementCssClass = document.getElementById("Target").className;
5 trả về một đối tượng giống như mảng của tất cả các phần tử con có tất cả (các) tên lớp đã cho.
var ElementCssClass = document.getElementById("Target").className;
4
method of
var ElementCssClass = document.getElementById("Target").className;
5 interface returns an array-like object of all child elements which have all of the given class name(s).

Khi được gọi trên đối tượng

var ElementCssClass = document.getElementById("Target").className;
6, tài liệu hoàn chỉnh được tìm kiếm, bao gồm cả nút gốc. Bạn cũng có thể gọi
var ElementCssClass = document.getElementById("Target").className;
7 trên bất kỳ yếu tố nào; Nó sẽ chỉ trả về các phần tử là hậu duệ của phần tử gốc được chỉ định với (các) tên lớp đã cho.

Cảnh báo: Đây là một

var ElementCssClass = document.getElementById("Target").className;
8 trực tiếp. Những thay đổi trong DOM sẽ phản ánh trong mảng khi các thay đổi xảy ra. Nếu một phần tử được chọn bởi mảng này không còn đủ điều kiện cho bộ chọn, nó sẽ tự động bị xóa. Hãy nhận biết điều này cho mục đích lặp. This is a live
var ElementCssClass = document.getElementById("Target").className;
8. Changes in the DOM will reflect in the array as the changes occur. If an element selected by this array no longer qualifies for the selector, it will automatically be removed. Be aware of this for iteration purposes.

Cú pháp

getElementsByClassName(names)

Thông số

var ElementCssClass = document.getElementById("Target").className;
9

Một chuỗi đại diện cho (các) tên lớp để khớp; Nhiều tên lớp được phân tách bằng khoảng trắng.

Giá trị trả về

Một

var ElementCssClass = document.getElementById("Target").className;
8 của các yếu tố được tìm thấy.

Ví dụ

Nhận tất cả các yếu tố có một lớp 'kiểm tra':

document.getElementsByClassName('test')

Nhận tất cả các yếu tố có cả hai lớp 'Red' và 'Test':

document.getElementsByClassName('red test')

Nhận tất cả các yếu tố có một lớp 'kiểm tra', bên trong một phần tử có ID của 'Main':

document.getElementById('main').getElementsByClassName('test')

Nhận phần tử đầu tiên với lớp 'kiểm tra' hoặc

document.getElementById('someDiv').className
1 nếu không có phần tử phù hợp:

document.getElementsByClassName('test')[0]

Chúng ta cũng có thể sử dụng các phương thức của mảng. Kiểu mẫu trên bất kỳ

var ElementCssClass = document.getElementById("Target").className;
8 nào bằng cách chuyển
var ElementCssClass = document.getElementById("Target").className;
8 làm giá trị này của phương thức. Ở đây chúng tôi sẽ tìm thấy tất cả các thành phần div có một lớp 'kiểm tra':

const testElements = document.getElementsByClassName('test');
const testDivs = Array.prototype.filter.call(
  testElements,
  (testElement) => testElement.nodeName === 'DIV',
);

Nhận phần tử đầu tiên có lớp là 'kiểm tra'

Đây là phương pháp hoạt động được sử dụng phổ biến nhất.

<html lang="en">
  <body>
    <div id="parent-id">
      <p>hello world 1p>
      <p class="test">hello world 2p>
      <p>hello world 3p>
      <p>hello world 4p>
    div>

    <script>
      const parentDOM = document.getElementById("parent-id");

      const test = parentDOM.getElementsByClassName("test"); // a list of matching elements, *not* the element itself
      console.log(test); // HTMLCollection[1]

      const testTarget = parentDOM.getElementsByClassName("test")[0]; // the first element, as we wanted
      console.log(testTarget); // 

hello world 2

script> body> html>

Nhiều lớp ví dụ

document.getElementById('someDiv').className
4 hoạt động rất giống với
document.getElementById('someDiv').className
5 và
document.getElementById('someDiv').className
6. Chỉ các phần tử với tất cả các tên lớp được chỉ định được chọn.

HTML

var ElementCssClass = document.getElementById("Target").className;
0

JavaScript

var ElementCssClass = document.getElementById("Target").className;
1

Kết quả

Thông số kỹ thuật

Sự chỉ rõ
DOM Standard # ref-for-document-getElementsbyClassName①
# ref-for-dom-document-getelementsbyclassname①

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Làm thế nào để bạn tìm thấy lớp của một div?

Trong bài viết này, chúng tôi sẽ tìm cách có được tất cả các yếu tố của một lớp cụ thể bên trong thẻ HTML Div. Để làm điều này, chúng tôi sẽ sử dụng phương thức HTML Dom QuerySelectorall (). Phương thức này của HTML DOM (mô hình đối tượng tài liệu) trả về tất cả các phần tử trong tài liệu phù hợp với (các) bộ chọn CSS được chỉ định.use HTML DOM querySelectorAll()method. This method of HTML DOM (document object model) returns all elements in the document that matches a specified CSS selector(s).

Làm thế nào để tôi có được các yếu tố bên trong một div?

Chúng ta có thể sử dụng Document.QuerySelector để chọn Div và sau đó chọn một phần tử trong đó với lớp đã cho sau đó. Chúng tôi chỉ gọi Truy vấnSelector trên phần tử với ID MyDiv để chọn các mục bên trong div đó.use document. querySelector on to select a div and then select an element within it with the given class after that. We just call querySelector on the element with the ID mydiv to select items inside that div.

GetElementsByClassName trả lại gì?

Phương thức getElementsByClassName () trả về một tập hợp các phần tử với (các) tên lớp được chỉ định.Phương thức getElementsByClassName () trả về một htmlCollection.a collection of elements with a specified class name(s). The getElementsByClassName() method returns an HTMLCollection.

Làm thế nào để bạn nhắm mục tiêu một lớp trong JavaScript?

Để chọn một lớp HTML cụ thể bằng JavaScript, chúng tôi cần nhắm mục tiêu nó và sau đó lưu trữ nó dưới dạng biến.Dưới đây là một dòng JavaScript chúng ta cần nhắm mục tiêu phần tử này và lưu trữ nó dưới dạng biến: mã từ trình chỉnh sửa văn bản: Const Vanilladescrip = Document.Truy vấnSelector ('.target it and then store it as a variable. Here is the one line of JavaScript we need to target this element and store it as a variable: Code from a text editor: const vanillaDescription = document. querySelector('.