Phần tử div có một lớp hộp bên trong HTML và bây giờ hãy thay đổi nó thành một lớp vòng tròn bằng JavaScript
.box, .circle {
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:100px;
background:#32bacf;
margin:10px;
text-align:center;
}
.circle {
border-radius:50%;
}
.blue {
background:#32bacf;
}
.orange {
background:orange;
}
Đầu tiên, lấy tham chiếu DOM của phần tử div bằng cách sử dụng hộp tên lớp của nó bằng cách gọi phương thức getElementsByClassName[] trên đối tượng tài liệu
Ghi chú. Bạn cũng có thể sử dụng phương thức khác để lấy các tham chiếu DOM như getElementByID[], getElementsByName, QuerySelector[], v.v.
Thay tên lớp. hộp với. khoanh tròn bằng thuộc tính className
Ngoài ra, hãy thay đổi văn bản InternalHTML thành hình tròn
const boxes = document.getElementsByClassName["box"];
boxes[0].innerHTML = "circle";
boxes[0].className = "circle";
2. Thay đổi tên lớp bằng phương thức setAttribute
Tương tự như thuộc tính className, bạn có thể sử dụng phương thức setAttribute[] để thay thế tên lớp từ. hộp để. lớp học vòng tròn
Gọi phương thức setAttribute[] trên đối tượng phần tử div
Phải mất hai đối số
- tên thuộc tính. tầng lớp
- giá trị thuộc tính. vòng tròn [là tên lớp]
const boxes = document.getElementsByClassName["box"];
boxes[0].setAttribute["class", "circle"];
Khi bạn sử dụng thuộc tính className hoặc phương thức setAttribute[], chúng sẽ thay thế bất kỳ một hoặc nhiều tên lớp hiện có nào bằng [các] tên lớp mới
3. Thay đổi tên lớp bằng API classList
Ngoài ra, phương thức add[] trên classList cũng có thể được sử dụng để thay đổi giá trị của thuộc tính tên lớp của phần tử
Phương thức add[] trên đối tượng classList sẽ thêm một lớp mới vào danh sách lớp hiện có thay vì thay thế nó
Vì lý do đó, bạn sẽ cần xóa lớp trước đó bằng phương thức remove[] trên đối tượng classList
const boxes = document.getElementsByClassName["box"];
boxes[0].classList.add["circle"];
boxes[0].classList.remove["box"];
4. Thay đổi nhiều tên lớp thành một phần tử
Tìm hiểu cách thay thế/đổi nhiều tên lớp thành một phần tử trong JavaScript
Như bạn có thể thấy, phần tử div có hai tên lớp. hộp và màu xanh
box
Bây giờ hãy thay thế chúng bằng hình tròn và màu cam bằng API classList
const boxes = document.getElementsByClassName["box"];
boxes[0].classList.add["circle", "orange"];
boxes[0].classList.remove["box", "blue"];
Sử dụng phương thức setAttribute[]
const boxes = document.getElementsByClassName["box"];
boxes[0].setAttribute["class", "circle orange"];
Sử dụng thuộc tính className
const boxes = document.getElementsByClassName["box"];
boxes[0].className = "circle orange";
5. Thay đổi tên lớp thành nhiều phần tử
Tìm hiểu cách thay đổi tên lớp thành nhiều phần tử trong JavaScript
Dưới đây là năm phần tử div với hộp tên lớp
Không có gì lạ mắt
________số 8_______Nhận tham chiếu DOM của tất cả các phần tử div bằng phương thức getElementsByTagName[] trên đối tượng tài liệu
Phương thức getElementsByTagName[] trả về tất cả các phần tử div dưới dạng HTMLCollection
HTMLCollection là đối tượng kiểu mảng và có thể được lặp lại bằng cách sử dụng vòng lặp for…of
.box, .circle {
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:100px;
background:#32bacf;
margin:10px;
text-align:center;
}
.circle {
border-radius:50%;
}
.blue {
background:#32bacf;
}
.orange {
background:orange;
}
0Bên trong mỗi lần lặp lại, thay thế tên lớp của từng phần tử div từ hộp sang vòng kết nối
6. Thay đổi tên lớp khi nhấp chuột
Hãy thay đổi tên lớp của một phần tử khi nhấp chuột
Đây là một div đơn giản với hộp tên lớp
Thay đổi hộp tên lớp thành vòng tròn khi một phần tử được nhấp vào
box
Nhận tham chiếu DOM của phần tử hộp bằng cách sử dụng getElementsByClassName[] trên đối tượng tài liệu
Đính kèm sự kiện nhấp chuột vào phần tử bằng chức năng gọi lại boxPressed
.box, .circle {
display:flex;
justify-content:center;
align-items:center;
width:100px;
height:100px;
background:#32bacf;
margin:10px;
text-align:center;
}
.circle {
border-radius:50%;
}
.blue {
background:#32bacf;
}
.orange {
background:orange;
}
2Bên trong hàm gọi lại, lấy phần tử hiện được nhấp bằng cách sử dụng đối tượng sự kiện được truyền vào hàm
Làm cách nào để lấy HTML bên trong theo tên lớp?
Làm cách nào để lấy văn bản theo tên lớp trong JavaScript?
Làm cách nào để lấy giá trị InternalHTML trong JavaScript?
- element with the id menu using the getElementById[] method..
- element using the createElement[] and appendChild[] methods..
- element using the innerHTML property of the
- element..