Bài đăng này sẽ minh họa quy trình đặt nhiều thuộc tính trên một phần tử HTML bằng JavaScript.
Làm cách nào để đặt nhiều thuộc tính trên một phần tử bằng JavaScript?
Để đặt đồng thời nhiều thuộc tính trên một phần tử, trước tiên, hãy tạo một đối tượng có tên và giá trị thuộc tính. Nhận danh sách các khóa của đối tượng dưới dạng một mảng với “ Object.keys() ”, sau đó, đặt tất cả các thuộc tính trên thành phần HTML đã chỉ định bằng “ setAttribute() ' phương pháp.
cú pháp
Cú pháp đã cho được sử dụng cho phương thức setAttribute():
yếu tố. setAttribute ( attrName, attrValue ) ;
Cú pháp trên chứa hai tham số: “ Tên ' và ' giá trị ”.
- “ attrName ” là tên của thuộc tính mới.
- “ attrValue ” là giá trị của thuộc tính mới.
- Phương thức này sẽ tạo một thuộc tính mới và gán giá trị cho nó. Nếu thuộc tính được chỉ định đã tồn tại thì giá trị của nó sẽ được cập nhật.
Sử dụng cú pháp đã cho cho phương thức Object.keys():
Sự vật . phím ( sự vật )Nó trả về một mảng của một đối tượng nhất định.
Ví dụ 1: Đặt nhiều thuộc tính trên một phần tử bằng phương thức forEach() Với phương thức setAttribute()
Đầu tiên, tạo một phần tử trong tệp HTML:
< id nút = 'cái nút' > LINH KIỆN cái nút >Hiện tại, trang web sẽ trông như thế này:
Trong mã JavaScript, trước tiên, hãy tạo một đối tượng có tên “ phần tửthuộc tính ” và thêm các thuộc tính có tên và giá trị vào đối tượng. Ở đây, chúng ta sẽ thêm thuộc tính style, tên của phần tử và thuộc tính disable cho phần tử nút:
hăng sô phần tửthuộc tính = {Phong cách : 'màu nền: rgb(153, 28, 49); màu trắng;' ,
Tên : 'Nút Linux' ,
Vô hiệu hóa : '' ,
} ;
Bây giờ, hãy định nghĩa một hàm có tên “ setMultipleAttributesonElement ” nơi đầu tiên gọi “ Object.keys() ” để lấy mảng các khóa của đối tượng và sau đó sử dụng “ cho mỗi() ” để lặp qua mảng và cuối cùng gọi phương thức “ setAttribute() ” để đặt tất cả các thuộc tính đã xác định trên phần tử HTML đã chỉ định.
hàm setMultipleAttributesonElement ( phần tử, thuộc tính phần tử ) {Sự vật . phím ( phần tửthuộc tính ) . cho mỗi ( thuộc tính => {
yếu tố. setAttribute ( thuộc tính, elemAttribut [ thuộc tính ] ) ;
} ) ;
}
Tìm nạp nút bằng cách sử dụng id được chỉ định với sự trợ giúp của “ getElementById() ' phương pháp:
hăng sô cái nút = tài liệu. getElementById ( 'cái nút' ) ;Gọi hàm đã xác định “ setMultipleAttributesonElement ” và chuyển phần tử làm đối số đầu tiên và đối tượng của các thuộc tính làm đối số thứ hai:
setMultipleAttributesonElement ( nút, phần tửAttributes ) ;Đầu ra cho thấy rằng nhiều thuộc tính của một nút đã được thêm thành công:
Bạn cũng có thể đặt nhiều thuộc tính trên một phần tử mà không cần tạo một đối tượng riêng cho các thuộc tính. Để làm điều này, hãy làm theo ví dụ dưới đây.
Ví dụ 2: Đặt nhiều thuộc tính trên một phần tử bằng cách sử dụng vòng lặp với phương thức setAttribute()
Xác định hàm có hai tham số trong tệp JavaScript và sử dụng vòng lặp for để đặt nhiều thuộc tính bên trong hàm đó bằng cách gọi lệnh “ setAttribute() ' phương pháp:
hàm setMultipleAttributesonElement ( phần tử, thuộc tính phần tử ) {vì ( cho tôi vào elemAttribut ) {
yếu tố. setAttribute ( tôi, elemAttributes [ tôi ] ) ;
}
}
Truy xuất nút bằng id được chỉ định của nó:
hăng sô cái nút = tài liệu. getElementById ( 'cái nút' ) ;Gọi hàm đã xác định bằng cách chuyển phần tử nút và nhiều thuộc tính ở dạng cặp tên-giá trị:
setMultipleAttributesonElement ( cái nút, { 'Phong cách' : 'màu nền: rgb(153, 28, 49); màu: trắng;' , 'Vô hiệu hóa' : '' , 'Tên' : 'Nút Linux' } ) ;đầu ra
Chúng tôi đã tổng hợp tất cả thông tin cần thiết liên quan đến việc đặt nhiều thuộc tính trên phần tử HTML bằng JavaScript.
Sự kết luận
JavaScript được xác định trước setAttribute() Phương thức ” được sử dụng để đặt một hoặc nhiều thuộc tính cho một phần tử. Để đặt nhiều thuộc tính trên một phần tử, trước tiên, hãy tạo một đối tượng chứa các thuộc tính ở dạng tên-giá trị. Lấy khóa của các đối tượng trong một mảng bằng cách sử dụng “ Object.keys() ”, sau đó đặt tất cả các thuộc tính trên các phần tử đã chỉ định bằng “ setAttribute() ' phương pháp. Trong bài đăng này, chúng tôi đã minh họa quy trình đặt nhiều thuộc tính trên một phần tử HTML bằng JavaScript.