Các hàm xử lý class trong javascript

Các hàm xử lý class trong javascript là gì ? Để viết hiệu ứng bằng javascript chúng ta phải xử lý bằng css , xử lý css chính là thông qua class để xử lý. Phương pháp hiệu quả nhất hiện nay chính là kết hợp js và css thông qua class để xử lý. Mà để thông qua được class thì chúng ta lại phải biết các hàm xử lý class trong javascript. Và các hàm xử lý class lại có trong bài viết này của mình :D.

các hàm xử lý class trong javascript

Các hàm xử lý class trong javascript

classList.add()

Hàm này sẽ thêm một class vào thẻ html.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>classList</title>
        <link rel="stylesheet" href="1.css">
</head>
<body>
	<h1>ADD</h1>
	<script type="text/javascript">
		var x = document.querySelectorAll("h1");
		console.log(x);
		x[0].classList.add('style');	
	</script>
</body>
</html>

Truy xuất thẻ <h1>
Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1> hay chưa, các bạn nên làm bước này để sai còn biết mà mò ngay. Viết nhiều code rồi thấy lỗi mò bao giờ cho ra 😀
Dùng lệnh x[0].classList.add('style') để thêm class “style” vào thẻ <h1>

Ok mình đã thêm cái class “style” vào, giờ mình sẽ thêm css cho nó.

.style{
			text-align: center;
			background-image:linear-gradient(to right, #ffb347, #ffcc33);
			color:white;
			padding:1rem;
			box-shadow: 5px 5px 5px black
		}

classList.remove()

Hàm này sẽ bỏ class trong thẻ html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>classList</title>
        <link rel="stylesheet" href="1.css">
</head>
<body>
	<h1 class="TXT">SUB</h1>
	<script type="text/javascript">
		var x = document.querySelectorAll("h1");
		console.log(x);
		x[0].classList.remove('TXT');	
                console.log(x[0]);
	</script>
</body>
</html>

Truy xuất thẻ <h1>
Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1>
Dùng lệnh x[0].classList.remove('TXT') để bỏ class “TXT” khỏi thẻ <h1>
console.log(x[0]) để kiểm tra kết quả, bây giờ class “TXT” mất tiêu rồi.

classList.toggle()

Hàm này rất là hay luôn :v bạn có thể hiểu thế này có rồi thì nó bỏ , còn chưa có thì nó sẽ thêm vào.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>classList</title>
        <link rel="stylesheet" href="1.css">
</head>
<body>
	<h1 class="SUB">TOGGLE</h1>
	<script type="text/javascript">
		var x = document.querySelectorAll("h1");
		console.log(x);
		x[0].classList.toggle('ADD');	
                x[0].classList.toggle('SUB'); 
                console.log(x[0]);
	</script>
</body>
</html>

Truy xuất thẻ <h1>
Dùng hàm console.log để kiểm tra đã truy xuất được thẻ <h1>
Dùng lệnh x[0].classList.toggle('ADD') để thêm class “ADD” vào thẻ<h1> vì “ADD” chưa có nên nó thêm vào
Dùng lệnh x[0].classList.toggle('SUB') để thêm class “SUB” khỏi thẻ <h1> vì có rồi nên nó bỏ đi.
console.log(x[0]) để kiểm tra kết quả, bây giờ class “SUB” biến mất , còn “ADD” được thêm vào.

Ok xong ! Thông báo: sau này khi bạn viết hiệu ứng nào bằng js thì cũng luôn có sự góp mặt của 3 hàm này :D. Mình xin kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây

5/5 - (1 bình chọn)

Các hàm xử lý class trong javascript

Bài viết liên quan

Reader Interactions

Để lại một bình luận Hủy