Đặt giá trị theo tên lớp trong JavaScript

Question

Trong hướng dẫn ngắn này, chúng tôi sử dụng JavaScript để lấy phần tử theo tên lớp. Chúng tôi chia nhỏ khái niệm, giải thích mã và sau đó thảo luận về những hạn chế của phương pháp được sử dụng

Nội dung chính Show

Mục lục - Javascript lấy phần tử theo lớp
Thuộc tính lớp hoạt động như thế nào?
Sử dụng phương thức getElementsByClassName() của JavaScript
Cú pháp như sau
Mã và giải thích
Thay đổi giá trị lớp bằng thuộc tính className
Thay đổi giá trị lớp bằng thuộc tính classList
Làm cách nào để đặt giá trị theo tên lớp trong JavaScript?
Làm cách nào để đặt tên lớp trong JavaScript?
Làm cách nào để đặt giá trị đầu vào theo tên trong JavaScript?
Làm cách nào để gán giá trị bằng tên lớp trong jquery?

Trong trường hợp bạn có nhiều kinh nghiệm và chỉ ở đây để tìm giải pháp, bạn có thể sử dụng liên kết này

Mục lục - Javascript lấy phần tử theo lớp

Thuộc tính lớp hoạt động như thế nào?
Sử dụng phương thức getElementsByClassName() của JavaScript
Hạn chế và Hãy cẩn thận - JavaScript lấy phần tử theo lớp
Các khái niệm liên quan khác

Thuộc tính lớp hoạt động như thế nào?

Thuộc tính lớp là thuộc tính tùy chọn của phần tử HTML. Thuộc tính này có thể được sử dụng trên bất kỳ phần tử HTML nào. Khi một lớp được tạo, tên của chúng có thể được CSS hoặc JavaScript sử dụng để áp dụng một kiểu cụ thể hoặc để thực hiện một số tác vụ nhất định. Điều này đảm bảo rằng tất cả các phần tử thuộc về một lớp cụ thể hoạt động và xuất hiện theo một kiểu tương tự

Đoạn mã dưới đây là một ví dụ về thuộc tính lớp

Title

Sử dụng phương thức getElementsByClassName() của JavaScript

JavaScript getElementsByClassName được sử dụng để lấy tất cả các phần tử thuộc về một lớp cụ thể. Khi phương thức lấy phần tử theo tên lớp của JavaScript được gọi trên đối tượng tài liệu, nó sẽ tìm kiếm toàn bộ tài liệu, bao gồm các nút gốc và trả về một mảng chứa tất cả các phần tử

Cú pháp như sau

var elements = document.getElementsByClassName(name);

Ở đây “name” là tên lớp mà bạn muốn tìm và “elements” là một biến chứa mảng các phần tử

Mã và giải thích

Hãy lấy một mã HTML mẫu



        
            Name
            Skills
            Cost
            Projects

Bây giờ vì chúng tôi dự định tìm kiếm phần tử trong một phần cụ thể, trước tiên chúng tôi xác định phần đó cùng với ID

Thuộc tính className của giao diện Element nhận và đặt giá trị của thuộc tính class của phần tử được chỉ định

Một biến chuỗi đại diện cho lớp hoặc các lớp được phân tách bằng dấu cách của phần tử hiện tại

const el = document.getElementById('item');
el.className = el.className === 'active' ? 'inactive' : 'active';

Tên className được sử dụng cho thuộc tính này thay vì class vì xung đột với từ khóa "lớp" trong nhiều ngôn ngữ được sử dụng để thao tác DOM

className cũng có thể là một thể hiện của SVGAnimatedString nếu element là một

elm.setAttribute('class', elm.getAttribute('class'))

0. Tốt hơn là lấy/đặt className của một phần tử bằng cách sử dụng

elm.setAttribute('class', elm.getAttribute('class'))

2 và

elm.setAttribute('class', elm.getAttribute('class'))

3 nếu bạn đang xử lý các phần tử SVG. Tuy nhiên, hãy tính đến việc

elm.setAttribute('class', elm.getAttribute('class'))

2 trả về

elm.setAttribute('class', elm.getAttribute('class'))

5 thay vì

elm.setAttribute('class', elm.getAttribute('class'))

6 nếu element có thuộc tính class trống

Để thay đổi giá trị thuộc tính class của phần tử HTML bằng JavaScript, bạn có thể sử dụng thuộc tính className hoặc thuộc tính classList được cung cấp cho mọi phần tử HTML đơn lẻ

Hướng dẫn này sẽ giúp bạn tìm hiểu cách sử dụng cả hai phương thức, bắt đầu từ thuộc tính className

Thay đổi giá trị lớp bằng thuộc tính className

Thuộc tính className cho phép bạn tìm nạp giá trị thuộc tính class của phần tử HTML dưới dạng chuỗi

Đây là một ví dụ về cách hoạt động của tài sản className

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    console.log(paragraph.className); // "red"
  script>
body>

Bây giờ bạn đã biết cách thức hoạt động của thuộc tính className, bạn có thể thay đổi giá trị class của một phần tử bằng cách gán một giá trị mới cho thuộc tính như sau

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

Sử dụng thuộc tính className cho phép bạn thay đổi giá trị thuộc tính class, nhưng bạn cần thêm giá trị trước đó theo cách thủ công nếu muốn giữ nguyên

Ví dụ, để giữ lại lớp

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

6 từ phần tử

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

7 ở trên và thêm một lớp mới tên là

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

8, bạn cần chỉ định cả hai lớp như sau

const paragraph = document.getElementById("header");
paragraph.className = "red font-large";

Mặc dù lớp

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

6 đã có sẵn nhưng bạn vẫn cần chỉ định lại nó, tạo ra một sự dư thừa nhỏ trong mã của bạn

Để tránh loại dự phòng này, bạn có thể sử dụng thuộc tính classList để thay thế

Thay đổi giá trị lớp bằng thuộc tính classList

Thuộc tính classList là thuộc tính chỉ đọc của phần tử HTML trả về giá trị thuộc tính class dưới dạng một mảng. Thuộc tính cũng cung cấp một số phương thức để bạn thao tác giá trị thuộc tính class

Ví dụ: để thêm tên lớp mới mà không xóa giá trị hiện tại, bạn có thể sử dụng phương thức

const paragraph = document.getElementById("header");
paragraph.className = "red font-large";

4

Sử dụng cùng một ví dụ về phần tử

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

7 ở trên, đây là cách thêm lớp

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

8 mà không xóa phần tử

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.className = "yellow blue";
    console.log(paragraph.className); // "yellow blue"
  script>
body>

6

<body>
  <p id="header" class="red">Hello World! This is a paragraph element.p>
  <script>
    const paragraph = document.getElementById("header");
    paragraph.classList.add("font-large");
    console.log(paragraph.classList); // ["red", "font-large"]
  script>
body>

Khi bạn muốn xóa giá trị thuộc tính class của phần tử, bạn có thể sử dụng phương thức

const paragraph = document.getElementById("header");
paragraph.className = "red font-large";

9, cho phép bạn đặt tên lớp

const paragraph = document.getElementById("header");
paragraph.className = "red font-large";

9 dưới dạng chuỗi được phân cách bằng dấu phẩy

Làm cách nào để đặt giá trị theo tên lớp trong JavaScript?

Bạn có thể sử dụng $(". tên lớp"). eq(0) .

Làm cách nào để đặt tên lớp trong JavaScript?

Để thay đổi tất cả các lớp cho một phần tử. getElementById("MyElement"). className = "MyClass"; (Bạn có thể sử dụng danh sách được phân cách bằng dấu cách để áp dụng nhiều lớp. )

Làm cách nào để đặt giá trị đầu vào theo tên trong JavaScript?

Để nhận và đặt giá trị văn bản đầu vào trong JavaScript, hãy sử dụng. Phương thức “getElementById()” . Phương thức “getElementByClassName()” .

Làm cách nào để gán giá trị bằng tên lớp trong jquery?

Trả về thuộc tính giá trị. $(bộ chọn). giá trị()

Đặt thuộc tính giá trị. $(bộ chọn). giá trị (giá trị)

Đặt thuộc tính giá trị bằng hàm. $(bộ chọn). val (hàm (chỉ mục, curValue))

programming javascript

Đặt giá trị theo tên lớp trong JavaScript

Mục lục - Javascript lấy phần tử theo lớp

Thuộc tính lớp hoạt động như thế nào?

Title

Sử dụng phương thức getElementsByClassName() của JavaScript

Cú pháp như sau

Mã và giải thích

Thay đổi giá trị lớp bằng thuộc tính className

Thay đổi giá trị lớp bằng thuộc tính classList

Làm cách nào để đặt giá trị theo tên lớp trong JavaScript?

Làm cách nào để đặt tên lớp trong JavaScript?

Làm cách nào để đặt giá trị đầu vào theo tên trong JavaScript?

Làm cách nào để gán giá trị bằng tên lớp trong jquery?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội