4.1 Manipulacja atrybutami
Manipulacja atrybutami i stylami elementów DOM to ważna część pracy z dokumentami webowymi. Umożliwia to zmienianie wyglądu elementów oraz ich zachowanie na podstawie działań użytkownika czy innych warunków.
1. Pobieranie atrybutów
Do pobierania wartości atrybutów elementu stosujemy metodę getAttribute().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</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); // Wyświetli: https://example.com
</script>
</body>
</html>
2. Ustawianie atrybutów
Do ustawiania lub zmiany wartości atrybutu elementu stosujemy metodę setAttribute().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</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')); // Wyświetli: https://newexample.com
</script>
</body>
</html>
3. Usuwanie atrybutów
Do usuwania atrybutu elementu stosujemy metodę removeAttribute().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</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')); // Wyświetli: null
</script>
</body>
</html>
4. Sprawdzanie obecności atrybutów
Do sprawdzania obecności atrybutu stosujemy metodę hasAttribute().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</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')); // Wyświetli: true
link.removeAttribute('target');
console.log(link.hasAttribute('target')); // Wyświetli: false
</script>
</body>
</html>
4.2 Manipulacja klasami
1. Dodawanie klas
Do dodawania klasy do elementu stosujemy metodę classList.add().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.add('highlight');
</script>
</body>
</html>
2. Usuwanie klas
Do usuwania klasy z elementu stosujemy metodę classList.remove().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.classList.remove('highlight');
</script>
</body>
</html>
3. Przełączanie klas
Do przełączania klasy stosujemy metodę classList.toggle(). Dodaje klasę, jeśli jej nie ma,
i usuwa, jeśli jest.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<button type="button" id="myButton">Kliknij mnie!</button>
<script>
const btn = document.getElementById('myButton');
btn.addEventListener("click", () => {
btn.classList.toggle('highlight'); // Doda klasę. Przy kolejnym kliknięciu usunie klasę.
});
</script>
</body>
</html>
4. Sprawdzanie obecności klasy
Do sprawdzania obecności klasy stosujemy metodę classList.contains().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p id="myParagraph" class="highlight">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
console.log(paragraph.classList.contains('highlight')); // Wyświetli: true
paragraph.classList.remove('highlight');
console.log(paragraph.classList.contains('highlight')); // Wyświetli: false
</script>
</body>
</html>
4.3 Manipulacja stylami
1. Zmiana stylów inline
Do zmiany stylów inline elementu używamy właściwości style.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<p id="myParagraph">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = 'red';
paragraph.style.fontSize = '20px';
</script>
</body>
</html>
2. Pobieranie obliczonych stylów
Do pobierania bieżących obliczonych stylów elementu stosujemy metodę window.getComputedStyle().
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
<style>
#myParagraph {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="myParagraph">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
const styles = window.getComputedStyle(paragraph);
console.log(styles.color); // Wyświetli: rgb(0, 0, 255) lub niebieski kolor
console.log(styles.fontSize); // Wyświetli: 18px
</script>
</body>
</html>
3. Usuwanie stylów inline
Aby usunąć style inline, wystarczy ustawić wartość stylu na pusty string.
Przykład:
<!DOCTYPE html>
<html>
<head>
<title>Dokument</title>
</head>
<body>
<p id="myParagraph" style="color: red; font-size: 20px;">To jest akapit.</p>
<script>
const paragraph = document.getElementById('myParagraph');
paragraph.style.color = '';
paragraph.style.fontSize = '';
</script>
</body>
</html>
GO TO FULL VERSION