<!DOCTYPE html>
<html>
<head>
<title>Phương thức classList add() nhiều giá trị trong JavaScript</title>
<style>
.pclass{padding:15px;border:1px solid #000;text-align:center;text-transform: uppercase;}
.pclassbg{background:red}
.pclassc{color:#fff}
</style>
</head>
<body>
<h1>Phương thức classList add() nhiều giá trị trong JavaScript</h1>
<p>Dùng để thêm class với một hoặc nhiều giá trị vào một phần tử HTML, nếu phần tử HTML đó đã có class rồi thì vẫn thêm bình thường mà không xóa giá trị của class cũ, phương thức add() nằm trong thuộc tính classList, ở ví dụ này mình thêm nhiều giá trị vào thuộc tính class:</p>
<p id="pid">Nội dung cần css</p>
<p>Click vào nút THÊM CLASS để thêm class với nhiều giá trị vào id pid</p>
<button onclick="themClass()">THÊM CLASS</button>
<script>
function themClass() {
// Lấy danh sách các phương thức của classList dành cho id pid
const list = document.getElementById("pid").classList;
// Thêm class với nhiều giá trị vào id pid
list.add("pclass","pclassbg","pclassc");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Phương thức classList add() nhiều giá trị trong JavaScript</title>
<style>
.pclass{padding:15px;border:1px solid #000;text-align:center;text-transform: uppercase;}
.pclassbg{background:red}
.pclassc{color:#fff}
</style>
</head>
<body>
<h1>Phương thức classList add() nhiều giá trị trong JavaScript</h1>
<p>Dùng để thêm class với một hoặc nhiều giá trị vào một phần tử HTML, nếu phần tử HTML đó đã có class rồi thì vẫn thêm bình thường mà không xóa giá trị của class cũ, phương thức add() nằm trong thuộc tính classList, ở ví dụ này mình thêm nhiều giá trị vào thuộc tính class:</p>
<p id="pid">Nội dung cần css</p>
<p>Click vào nút THÊM CLASS để thêm class với nhiều giá trị vào id pid</p>
<button onclick="themClass()">THÊM CLASS</button>
<script>
function themClass() {
// Lấy danh sách các phương thức của classList dành cho id pid
const list = document.getElementById("pid").classList;
// Thêm class với nhiều giá trị vào id pid
list.add("pclass","pclassbg","pclassc");
}
</script>
</body>
</html>
