06. JavaScript HTML DOM – Αλλαγή CSS

DOM CSS


Το HTML DOM επιτρέπει στη JavaScript να αλλάξει το στυλ των στοιχείων HTML.


Αλλαγή του στυλ HTML

Για να αλλάξετε το στυλ ενός στοιχείου HTML, χρησιμοποιήστε αυτήν τη σύνταξη:

document.getElementById(id).style.property = new style

Το παρακάτω παράδειγμα αλλάζει το στυλ ενός <p>στοιχείου:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<html>
<body>

<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "blue";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Δοκιμάστε το »


Χρήση γεγονότων (events)

Το HTML DOM σας επιτρέπει να εκτελέσετε κώδικα όταν συμβεί κάποιο γεγονός.

Τα γεγονότα δημιουργούνται από το πρόγραμμα περιήγησης όταν “συμβαίνουν πράγματα” σε στοιχεία HTML:

  • Ένα στοιχείο είναι πατημένο
  • Η σελίδα έχει φορτωθεί
  • Τα πεδία εισαγωγής αλλάζουν

Θα μάθετε περισσότερα σχετικά με τα γεγονότα στο επόμενο κεφάλαιο αυτού του σεμιναρίου.

Αυτό το παράδειγμα αλλάζει το στυλ του στοιχείου HTML id="id1", όταν ο χρήστης κάνει κλικ σε ένα κουμπί:

Παράδειγμα

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button"
onclick="document.getElementById('id1').style.color = 'red'">
Click Me!</button>

</body>
</html>

Δοκιμάστε το »


Περισσότερα παραδείγματα

Ορατότητα 

Πώς να κάνετε ένα στοιχείο αόρατο. Θέλετε να εμφανίσετε το στοιχείο ή όχι;

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>

<input type="button" value="Hide text" onclick="document.getElementById('p1').style.visibility='hidden'">
<input type="button" value="Show text" onclick="document.getElementById('p1').style.visibility='visible'">

</body>
</html>

Δοκιμάστε το »


Αναφορά αντικειμένου στυλ HTML DOM

Για όλες τις ιδιότητες στυλ HTML DOM, ανατρέξτε στην πλήρη παραπομπή στυλ αντικειμένου HTML DOM .


Δοκιμάστε τον εαυτό σας με τις ασκήσεις

Άσκηση:

Αλλάξτε το χρώμα κειμένου του <p>στοιχείου σε “κόκκινο”.

<p id="demo"></p>

<script>
document.getElementById("demo") = "red";
</script>

Υποβολή απάντησης

Ξεκινήστε την Άσκηση

Days
Hours
Minutes

06. JavaScript HTML DOM – Αλλαγή CSS

Κοινοποίηση

Share on facebook
Share on twitter

Ακολουθήστε μας

Αρέσει σε %d bloggers: