Ατрибούτα id του HTML

HTML id Η ιδιότητα χρησιμοποιείται για να καθορίσει μοναδικό id στο στοιχείο HTML.

Σε ένα έγγραφο HTML δεν μπορεί να υπάρχει περισσότερο από ένα στοιχείο με το ίδιο id.

Χρήση της ιδιότητας id

id Η ιδιότητα καθορίζει το μοναδικό ID του στοιχείου HTML. id Η τιμή της ιδιότητας πρέπει να είναι μοναδική στο έγγραφο HTML.

id Η ιδιότητα χρησιμοποιείται για να δείχνει στοιχεία του πίνακα των συγκεκριμένων διατάξεων του φόρματιστού.

Η γραμματική του id είναι: γράψτε ένα κενό (#) ακολουθούμενο από το όνομα του id. Στη συνέχεια, ορίστε τις ιδιότητες CSS εντός των παρενθέσεων {}.

παράδειγμα έχουμε <h1> στοιχείο, το οποίο αναφέρεται στο όνομα id "myHeader". Αυτό το <h1> Το στοιχείο θα χρησιμοποιήσει τις οδηγίες από το τμήμα #myHeader Ορίζοντας τις κατευθυντήριες γραμμές για το στυλ:

Παράδειγμα

<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

Προσπαθήστε το μόνοι σας

Σημείωση:Οι ονόματα id είναι ευαίσθητα στη γραμματική.

Σημείωση:Το id πρέπει να περιέχει τουλάχιστον έναν χαρακτήρα και δεν μπορεί να περιέχει κενά (χώρους, tab κ.λπ.).

Διαφορά μεταξύ κλάσης και id

Η ίδια κλάση μπορεί να χρησιμοποιηθεί από πολλαπλά HTML στοιχεία, ενώ ένας μοναδικός id μπορεί να χρησιμοποιηθεί μόνο από ένα στοιχείο στη σελίδα:

Παράδειγμα

<style>
/* Ορίζει το στυλ για το στοιχείο με το id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}
/* Ορίζει το στυλ για όλα τα στοιχεία με την κλάση "city" */
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
<!-- Έχει στοιχεία με μοναδικό id -->
<h1 id="myHeader">My Cities</h1>
<!-- Έχει πολλαπλά στοιχεία με την ίδια κλάση -->
<h2 class="city">London</h2>
<p>London είναι η πρωτεύουσα της Αγγλίας.</p>
<h2 class="city">Paris</h2>
<p>Paris είναι η πρωτεύουσα της Γαλλίας.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo είναι η πρωτεύουσα της Ιαπωνίας.</p>

Προσπαθήστε το μόνοι σας

Συμβουλή:Παρακαλώ επισκεφθείτε την Εκμάθηση CSS Μάθετε περισσότερα για το CSS εδώ.

HTML εικονίδια επιτυγχάνονται μέσω ID και συνδέσμων.

Τα εικονίδια HTML χρησιμοποιούνται για να επιτρέψουν στους αναγνώστες να μετακινηθούν σε συγκεκριμένες ενότητες της ιστοσελίδας.

Αν η σελίδα είναι μεγάλη, τα εικονίδια μπορεί να είναι πολύ χρήσιμα.

Για να χρησιμοποιήσετε το εικονίδιο, πρέπει πρώτα να το δημιουργήσετε και μετά να προσθέσετε σύνδεσμο.

Κατά την πατήση του σύνδεσμου, η σελίδα θα μετακινηθεί στην τοποθεσία με το εικονίδιο.

Παράδειγμα

Πρώτα, με id Ιδιότητα δημιουργίας σημειώσεων:

<h2 id="C4">Κεφάλαιο 4</h2>

τότε, στην ίδια σελίδα, προσθέστε σύνδεσμο προς αυτόν τον σηματοδότη ("Μεταβείτε στο Κεφάλαιο 4"):

Παράδειγμα

<a href="#C4">Μεταβείτε στο Κεφάλαιο 4</a>

Προσπαθήστε το μόνοι σας

ή, σε άλλη σελίδα, προσθέστε σύνδεσμο προς αυτόν τον σηματοδότη ("Μεταβείτε στο Κεφάλαιο 4"):

<a href="html_demo.html#C4">Μεταβείτε στο Κεφάλαιο 4</a>

Χρήση της ιδιότητας id στο JavaScript

Το JavaScript μπορεί επίσης να χρησιμοποιήσει την ιδιότητα id για να εκτελέσει ορισμένες εργασίες σε συγκεκριμένα στοιχεία.

Το JavaScript μπορεί να χρησιμοποιήσει getElementById() Μέθοδος πρόσβασης στο στοιχείο με συγκεκριμένο id:

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα id για να χειριστείτε κείμενο με JavaScript:

<script>
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>

Προσπαθήστε το μόνοι σας

Συμβουλή:Παρακαλώ JavaScript του HTML Σε αυτό το κεφάλαιο ή στις Εκμάθηση JavaScript μαθαίνετε JavaScript.

Συνοπτική περιγραφή

  • id Η ιδιότητα χρησιμοποιείται για τη σήμανση μοναδικού id στο στοιχείο HTML
  • id Η τιμή της ιδιότητας πρέπει να είναι μοναδική στο αρχείο HTML
  • Το CSS και το JavaScript μπορούν να χρησιμοποιηθούν id Η ιδιότητα χρησιμοποιείται για την επιλογή στοιχείων ή τη ρύθμιση στυλ συγκεκριμένων στοιχείων
  • id Η τιμή της ιδιότητας διακρίνεται σε κεφαλαία και πεζά
  • id Η ιδιότητα μπορεί επίσης να χρησιμοποιηθεί για τη δημιουργία σημειώσεων HTML
  • Το JavaScript μπορεί να χρησιμοποιήσει getElementById() Μέθοδος πρόσβασης στο στοιχείο με συγκεκριμένο id