4.1 Thao tác với thuộc tính
Thao tác với thuộc tính và kiểu dáng của DOM elements là một phần quan trọng khi làm việc với tài liệu web. Nó cho phép bạn thay đổi giao diện của các phần tử và hành vi của chúng dựa trên hành động người dùng hoặc các điều kiện khác.
1. Lấy giá trị thuộc tính
Để lấy giá trị của thuộc tính một phần tử, sử dụng method getAttribute().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
const href = link.getAttribute('href');
console.log(href); // Sẽ hiển thị: https://example.com
</script>
</body>
</html>
2. Thiết lập thuộc tính
Để thiết lập hoặc thay đổi giá trị thuộc tính của phần tử, sử dụng method setAttribute().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.setAttribute('href', 'https://newexample.com');
console.log(link.getAttribute('href')); // Sẽ hiển thị: https://newexample.com
</script>
</body>
</html>
3. Xóa thuộc tính
Để xóa thuộc tính của phần tử, sử dụng method removeAttribute().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
link.removeAttribute('target');
console.log(link.getAttribute('target')); // Sẽ hiển thị: null
</script>
</body>
</html>
4. Kiểm tra sự tồn tại của thuộc tính
Để kiểm tra sự tồn tại của thuộc tính, sử dụng method hasAttribute().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<a href="https://example.com" id="myLink" target="_blank">Visit Example.com</a>
<script>
const link = document.getElementById('myLink');
console.log(link.hasAttribute('target')); // Sẽ hiển thị: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Sẽ hiển thị: false
</script>
</body>
</html>
4.2 Thao tác với lớp
1. Thêm lớp
Để thêm lớp vào phần tử, sử dụng method classList.add().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Xóa lớp
Để xóa lớp khỏi phần tử, sử dụng method classList.remove().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Chuyển đổi lớp
Để chuyển đổi lớp, sử dụng method classList.toggle(). Nó thêm lớp nếu chưa có, và xóa nếu đã có.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Click me!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Thêm lớp. Nếu nhấn lại sẽ xóa lớp.
});
</script>
</body>
</html>
4. Kiểm tra sự tồn tại của lớp
Để kiểm tra sự tồn tại của lớp, sử dụng method classList.contains().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Sẽ hiển thị: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Sẽ hiển thị: false
</script>
</body>
</html>
4.3 Thao tác với kiểu dáng
1. Thay đổi kiểu dáng inline
Để thay đổi kiểu dáng inline của phần tử, sử dụng thuộc tính style.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Lấy kiểu dáng tính toán
Để lấy kiểu dáng hiện tại được tính toán của phần tử, sử dụng method window.getComputedStyle().
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Sẽ hiển thị: rgb(0, 0, 255) hoặc màu xanh
console.log(styles.fontSize); // Sẽ hiển thị: 18px
</script>
</body>
</html>
3. Xóa kiểu dáng inline
Để xóa kiểu dáng inline, chỉ cần thiết lập giá trị kiểu dáng rỗng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">This is a paragraph.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION