JavaScript HTML DOM - Αλλαγή CSS
- Προηγούμενη σελίδα DOM φόρμα
- Επόμενη σελίδα DOM κίνηση
HTML DOM allows JavaScript to change the style of HTML elements.
Change HTML Style
To change the style of an HTML element, use this syntax:
document.getElementById(id).style.property = new style
The following example changes the <p> Element's Style:
Παράδειγμα
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
<p>Ο παραπάνω παρagraφος έχει αλλάξει από το σενάριο.</p>
</body>
</html>
Χρήση συμβάντων
Το HTML DOM σας επιτρέπει να εκτελείτε κώδικα όταν συμβαίνει ένα συμβάν.
Όταν "κάτι" συμβαίνει σε ένα στοιχείο HTML, ο περιηγητής δημιουργεί συμβάντα:
- Όταν κάνετε κλικ σε ένα στοιχείο
- Όταν η σελίδα φορτώνει
- Όταν το πεδίο εισόδου αλλάζει
Θα μάθετε περισσότερα για τα συμβάντα στο επόμενο κεφάλαιο αυτού του οδηγού.
Αυτό το παράδειγμα θα αλλάξει το στυλ του στοιχείου HTML με id="id1" όταν ο χρήστης κάνει κλικ στο κουμπί:
Παράδειγμα
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">Ο τίτλος μου 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color = 'red'">
Κάντε κλικ εδώ!
</button>
</body>
</html>
Περισσότερα παραδείγματα
- Ορατότητα
- Πώς να κάνετε στοιχεία μη ορατά. Θέλετε να εμφανίσετε το στοιχείο;
Χέρι του HTML DOM Style αντικειμένου
Για όλες τις HTML DOM στυλ ιδιότητες, παρακαλώ επισκεφθείτε το Χέρι του HTML DOM Style αντικειμένου.
- Προηγούμενη σελίδα DOM φόρμα
- Επόμενη σελίδα DOM κίνηση
