4.1 屬性操作
操作DOM元素的屬性和樣式是處理網頁文件的重要部分。這使得可以根據用戶行為或其他條件來改變元素的外觀和行為。
1. 獲取屬性
要獲取元素屬性的值，可以使用方法 getAttribute()。
範例：
HTML
<!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); // 輸出: https://example.com
</script>
</body>
</html>
2. 設置屬性
要設置或修改元素屬性值，可以使用方法 setAttribute()。
範例：
HTML
<!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')); // 輸出: https://newexample.com
</script>
</body>
</html>
3. 刪除屬性
要刪除元素的屬性，可以使用方法 removeAttribute()。
範例：
HTML
<!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')); // 輸出: null
</script>
</body>
</html>
4. 檢查屬性是否存在
要檢查屬性是否存在，可以使用方法 hasAttribute()。
範例：
HTML
<!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')); // 輸出: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // 輸出: false
</script>
</body>
</html>
4.2 樣式類別操作
1. 添加樣式類別
要為元素添加樣式類別，可以使用方法 classList.add()。
範例：
HTML
<!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. 移除樣式類別
要從元素中移除樣式類別，可以使用方法 classList.remove()。
範例：
HTML
<!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. 切換樣式類別
要切換樣式類別，可以使用方法 classList.toggle()。如果類別不存在就添加，如果存在就移除。
範例：
HTML
<!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'); // 添加類別，再次點擊時移除類別。
});
</script>
</body>
</html>
4. 檢查樣式類別是否存在
要檢查樣式類別是否存在，可以使用方法 classList.contains()。
範例：
HTML
<!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')); // 輸出: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // 輸出: false
</script>
</body>
</html>
4.3 樣式操作
1. 修改內嵌樣式
要修改元素的內嵌樣式，可以使用屬性 style。
範例：
HTML
<!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. 獲取計算樣式
要獲取元素當前計算的樣式，可以使用方法 window.getComputedStyle()。
範例：
HTML
<!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); // 輸出: rgb(0, 0, 255) 或藍色
console.log(styles.fontSize); // 輸出: 18px
</script>
</body>
</html>
3. 刪除內嵌樣式
要刪除內嵌樣式，只需將樣式值設置為空字串即可。
範例：
HTML
<!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