Làm cách nào để đặt id thuộc tính trong JavaScript?

Phương thức setAttribute() được sử dụng để thiết lập hoặc thêm một thuộc tính cho một phần tử cụ thể và cung cấp một giá trị cho nó. Nếu thuộc tính đã tồn tại thì chỉ thiết lập hoặc thay đổi giá trị của thuộc tính. Vì vậy, chúng ta cũng có thể sử dụng phương thức setAttribute() để cập nhật giá trị của thuộc tính hiện có. Nếu thuộc tính tương ứng không tồn tại, nó sẽ tạo một thuộc tính mới với tên và giá trị được chỉ định. Phương thức này không trả về bất kỳ giá trị nào. Tên thuộc tính tự động chuyển đổi thành chữ thường khi chúng ta sử dụng nó trên phần tử HTML

Mặc dù chúng ta có thể thêm thuộc tính style bằng phương thức setAttribute() nhưng không nên sử dụng phương thức này để tạo kiểu. Để thêm kiểu, chúng ta có thể sử dụng các thuộc tính của đối tượng kiểu sẽ thay đổi kiểu một cách hiệu quả. Nó có thể rõ ràng với đoạn mã sau

cách sai

Khuyến cáo không nên dùng để thay đổi phong cách

cách đúng đắn

Cách chính xác để thay đổi phong cách được đưa ra dưới đây

Để lấy giá trị của một thuộc tính, chúng ta có thể sử dụng phương thức getAttribute() và để xóa một thuộc tính cụ thể khỏi một phần tử, chúng ta có thể sử dụng phương thức removeAtrribute()

Nếu chúng ta đang thêm một thuộc tính Boolean chẳng hạn như bị vô hiệu hóa, thì bất kể giá trị của nó là gì, nó luôn được coi là đúng. Nếu chúng ta yêu cầu đặt giá trị của thuộc tính Boolean thành false, chúng ta phải xóa toàn bộ thuộc tính bằng phương thức removeAttribute()

cú pháp

Các đối số của phương pháp này không phải là tùy chọn. Cả hai tham số phải được bao gồm khi sử dụng phương pháp này. Các giá trị tham số của phương thức này được định nghĩa như sau

Giá trị tham số

tên thuộc tính. Nó là tên của thuộc tính mà chúng ta muốn thêm vào một phần tử. Nó không thể để trống; . e. , nó không phải là tùy chọn

giá trị thuộc tính. Đó là giá trị của thuộc tính mà chúng tôi đang thêm vào một phần tử. Nó cũng không phải là một giá trị tùy chọn

Hãy hiểu cách sử dụng phương thức setAttribute() bằng cách sử dụng một số hình ảnh minh họa

Ví dụ 1

Trong ví dụ này, chúng tôi đang thêm thuộc tính href có giá trị là "https. //www. javatpoint. com/" vào thẻ có id = "link"

đầu ra

Sau khi thực thi đoạn mã trên, đầu ra sẽ là -

Chúng ta có thể thấy rằng trước khi nhấp vào nút đã cho, liên kết không được tạo. Sau khi nhấp vào nút, đầu ra sẽ là -

Bây giờ, chúng ta có thể thấy rằng liên kết đã được tạo

Ví dụ2

Trong ví dụ này, chúng tôi đang cập nhật giá trị của thuộc tính hiện có bằng phương thức setAttribute(). Ở đây, chúng tôi đang chuyển đổi trường văn bản thành nút bằng cách thay đổi giá trị của thuộc tính loại từ văn bản thành nút

Chúng ta phải nhấp vào nút được chỉ định để xem hiệu ứng

đầu ra

Sau khi thực thi đoạn mã trên, đầu ra sẽ là -

Sau khi nhấp vào nút, đầu ra sẽ là -

Ví dụ3

Ở đây, chúng tôi đang thêm một thuộc tính Boolean bị vô hiệu hóa để vô hiệu hóa nút được chỉ định. Nếu chúng ta đặt giá trị của thuộc tính bị vô hiệu hóa thành một chuỗi trống, thì nó sẽ tự động được đặt thành true khiến nút bị vô hiệu hóa

Để thêm id vào một phần tử, phương thức “setAttribute()” được sử dụng. Nó yêu cầu hai tham số, “tên” của thuộc tính là tham số đầu tiên, chẳng hạn như “id” và giá trị của nó là tham số thứ hai, chẳng hạn như “abc”

cú pháp

Id cú pháp đã cho được sử dụng cho phương thức setAttribute()

. setAttribute("id" , "value")

Có hai cách để thêm Id vào một phần tử trong JavaScript

Các ví dụ đã cho sẽ chứng minh cả hai cách từng cái một

ví dụ 1. Thêm ID bằng cách tạo phần tử mới trong JavaScript bằng phương thức setAttribute()

Trong ví dụ này, chúng tôi sẽ tạo một tiêu đề HTML bằng JavaScript và đặt id và nội dung bên trong cho phần tử DOM

Trong tệp JavaScript, tạo phần tử HTML “h3” bằng phương thức “createElement()”

const phần tử = tài liệu. createElement('h3');

Đặt id duy nhất cho tiêu đề bằng phương thức “setAttribute()”

. setAttribute("id" , "heading");

Ở đây, phương thức nhận hai đối số

• “Id” là đối số đầu tiên là tên thuộc tính
• “Tiêu đề” là giá trị của id dưới dạng thuộc tính thứ hai

Lấy tham chiếu của thẻ body HTML bằng phương thức “querySelector()”

var body = tài liệu. Bộ chọn truy vấn('body');

Thêm tiêu đề “h3” vào phần thân, sử dụng phương thức “appendChild()” bằng cách chuyển phần tử làm đối số

cơ thể. appendChild( phần tử );

Bây giờ, hãy đặt văn bản cho thành phần sẽ hiển thị trên DOM bằng cách sử dụng “getElementsByTagName()” với thuộc tính “innerHTML”

tài liệu. getElementsByTagName("h3")[0].innerHTML="Chào mừng bạn đến với Linuxhint. ";

đầu ra

Đầu ra biểu thị rằng tiêu đề được tạo thành công với id của nó được đặt bằng cách sử dụng phương thức “setAttribute()”

ví dụ 2. Thêm ID vào phần tử hiện có bằng phương thức setAttribute()

Hãy thử thêm một id mới vào phần tử HTML hiện có trong JavaScript

In an HTML file, create a heading with

tag and assign an id to it using the “id” attribute:< . Welcome to Linuxhint!Đầu ra HTML tương ứng sẽ làBây giờ, trong tệp JavaScript, trước tiên, hãy lấy tham chiếu của phần tử bằng cách sử dụng id được chỉ định của nó với sự trợ giúp của phương thức “getElementById()” và lưu trữ nó trong một biến “setId”var setId = tài liệu. getElementById("tiêu đề");Đặt id mới “heading1” cho phần tử bằng phương thức “setAttribute()”setId. setAttribute("id" , "heading1");đầu raĐầu ra ở trên chỉ ra rằng id của tiêu đề phần tử HTML hiện là “heading1” được đặt theo phương thức “setAttribute()” của JavaScriptPhần kết luận

Để thêm id vào một phần tử, hãy sử dụng phương thức JavaScript “setAttribute()”. Có hai cách để thêm id vào phần tử trong JavaScript, thêm id bằng cách tạo phần tử mới hoặc thêm id vào phần tử HTML hiện có trong JavaScript. Bài đăng này đã mô tả quy trình thêm ID vào một phần tử trong JavaScript

Làm cách nào để đặt id thuộc tính trong js?

Làm cách nào để lấy giá trị thuộc tính id trong JavaScript?

Làm cách nào để thay đổi giá trị thuộc tính trong JavaScript bằng id?

Làm cách nào để thêm id động trong JavaScript?