Add Class, Remove Class trong Javascript
Hôm nay ta sẽ học cách thêm 1 class hoặc xoá 1 class của 1 div bằng cách click vào button. Ví dụ ta có div như sau
<div id="result" class="base">Hello Javascript</div>
div này hiện đã có 1 class tên là "base". Class này chỉ chỉnh font đậm lên.
<style>
.base {
font-weight: bold;
}
</style>
Ta sẽ tạo 2 button ,1 button sẽ thêm class, 1 button sẽ xoá class.
<button onclick="addClassFunc()">Add class</button>
<button onclick="removeClassFunc()">Remove Class</button>
Button 1 sẽ gọi hàm addClassFunc() và button 2 sẽ gọi hàm removeClassFun(). Và ta cần tạo 1 class để cho button 1 thêm class này vào khi hàm addClassFunc() được gọi.
<style>
.bgStyle {
background: green;
color: red;
padding: 10px;
}
</style>
Để thêm class "bgStyle" vào div ta cần truy cập vào div có id là "result".
var result = document.getElementById('result');
Sau đó ta thêm class vào:
result.classList.add('bgStyle');
hoặc xoá class "bgStyle"
result.classList.remove("bgStyle");
Ta xem code sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JS</title>
<style>
.bgStyle {
background: green;
color: red;
padding: 10px;
}
.base {
font-weight: bold;
}
</style>
</head>
<body>
<button onclick="addClassFunc()">Add class</button>
<button onclick="removeClassFunc()">Remove Class</button>
<div id="result" class="base">Hello Javascript</div>
<script>
function addClassFunc() {
var result = document.getElementById("result");
result.classList.add('bgStyle');
}
function removeClassFunc() {
var result = document.getElementById("result");
result.classList.remove('bgStyle');
}
</script>
</body>
</html>
Như vậy ta đã biết cách thêm class và xoá class ra khỏi 1 div rồi. Cũng dễ phải không? ^_^