Γεια σε όλους! Σε αυτό το άρθρο θα δούμε πώς να ρυθμίσετε τα στυλ στο javascript σωστά και σε cross-browser.

Έτσι, όσοι είστε ήδη τουλάχιστον λίγο εξοικειωμένοι με τη javascript, γνωρίζετε ότι τα στοιχεία έχουν μια ιδιότητα στυλ, η οποία αποθηκεύει ένα αντικείμενο, χρησιμοποιώντας την οποία μπορείτε να ορίσετε ορισμένα στυλ CSS. Ωστόσο, δεν είναι όλα τόσο απλά όσο μπορεί να φαίνονται με την πρώτη ματιά. Και να γιατί. Ας δημιουργήσουμε δύο πολύ συνηθισμένα μπλοκ div, αλλά για το ένα θα ορίσουμε στυλ μέσω του χαρακτηριστικού style και για το άλλο μέσω της ετικέτας στυλ.

div(
πλάτος: 150 px;
ύψος: 150 px;
}

#div1 (
φόντο: #f00;
}

Τώρα ας προσπαθήσουμε να εμφανίσουμε την τιμή της ιδιότητας φόντου για αυτά τα μπλοκ.

Var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
alert(div1.style.background);
alert(div2.style.background);

Στην πρώτη περίπτωση, δεν θα λάβουμε τίποτα, αλλά για το μπλοκ div2 θα εμφανιστούν τα στυλ. Γιατί; Το θέμα είναι ότι το javascript μπορεί να εμφανίσει μόνο τις τιμές εκείνων των ιδιοτήτων που ορίστηκαν απευθείας στη σήμανση html χρησιμοποιώντας το χαρακτηριστικό style και εκείνων που ορίστηκαν μέσω javascript. Αν τώρα ορίσουμε την ιδιότητα φόντου έτσι

Div1.style.background = "#f00";

Τώρα η τιμή θα εμφανίζεται μέσω ειδοποίησης.

Alert(div1.style.background);

Τα ίδια στυλ που ορίζουμε στην ετικέτα στυλ ή σε ένα εξωτερικό φύλλο στυλ ονομάζονται "υπολογισμένα στυλ" ή "υπολογισμένα στυλ". Πήραν αυτό το όνομα για κάποιο λόγο. Το θέμα είναι ότι το πρόγραμμα περιήγησης πρώτα διαβάζει τη σήμανση html και στη συνέχεια υπολογίζει τα στυλ που ορίσαμε στο εξωτερικό φύλλο στυλ και τα εφαρμόζει σε αυτήν τη σήμανση.

Ωστόσο, μπορούμε ακόμα να έχουμε πρόσβαση σε αυτά. Η προδιαγραφή DOM Level2 έχει κάτι για αυτό: ειδική λειτουργία getComputedStyle() . Ας δούμε πώς λειτουργεί.

Var styles = getComputedStyle(div1);
alert(styles.background);

Πρέπει να του περάσετε το στοιχείο του οποίου τα στυλ θέλετε να αποκτήσετε και θα επιστρέψει ένα αντικείμενο σε εσάς. Τώρα απλώς καθορίστε το ακίνητο που χρειάζεστε και θα λάβετε αμέσως την αξία του.

Ωστόσο, αυτή η δυνατότητα δεν λειτουργεί με παλαιότερα προγράμματα περιήγησης (IE8- ), επομένως εάν θέλετε ο κώδικάς σας να είναι συμβατός με προγράμματα περιήγησης, χρησιμοποιήστε τον παρακάτω κώδικα.

Συνάρτηση getStyle(στοιχείο) (
επιστροφή window.getComputedStyle ; getComputedStyle(στοιχείο) : element.currentStyle;
}

Η χρήση είναι παρόμοια

Var styles = getStyle(div1); alert(styles.background);

Έτσι, σήμερα μάθαμε πώς να δουλεύουμε με στυλ σε javascript και πώς να λαμβάνουμε πρόγραμμα περιήγησης στυλ.

Γειά σου! Σε αυτό το σεμινάριο θα ήθελα να μιλήσω για το πώς μπορείτε να αλλάξετε το στυλ ενός στοιχείου σε μια ιστοσελίδα χρησιμοποιώντας JavaScript. Πρέπει να ειπωθεί ότι στο JavaScript, συνήθως χρησιμοποιούνται 2 προσεγγίσεις για την εργασία με στυλ:

• Αλλαγή της ιδιότητας στυλ
• Αλλαγή της τιμής κλάσης ενός στοιχείου

ιδιοκτησία στυλ

Η ιδιότητα στυλ αντιπροσωπεύει τα λεγόμενα ενσωματωμένα στυλ που θα εμφανίζονται στο στοιχείο μέσω του χαρακτηριστικού στυλ. Για παράδειγμα, ας ορίσουμε το χρώμα της γραμματοσειράς:

Var root1 = document.documentElement; // ορίστε το στυλ root1.style.color = "κόκκινο"; // λάβετε την τιμή στυλ document.write(root1.style.color); //κόκκινος

ΣΕ σε αυτό το παράδειγμαΤο όνομα της ιδιότητας χρώματος είναι το ίδιο με την ίδια ιδιότητα css. Κατ' αναλογία, μπορείτε να ορίσετε το χρώμα χρησιμοποιώντας css:

Html(χρώμα: κόκκινο;)

Ωστόσο, για εκείνες τις ιδιότητες css που έχουν παύλα στο όνομα, για παράδειγμα, μέγεθος γραμματοσειράς. Στη JavaScript, για αυτές τις ιδιότητες, η παύλα αφαιρείται και το πρώτο γράμμα μετά την παύλα γράφεται ως κεφαλαίο, δηλαδή με κεφαλαία

Var root1 = document.documentElement; root1.style.fontFamily = "Arial";

ιδιότητα className. Εργασία με τάξεις σε JavaScript.

Χρησιμοποιώντας μια ιδιότητα όπως className, μπορείτε να ορίσετε το χαρακτηριστικό class οποιουδήποτε στοιχείο html. Εδώ είναι ένα παράδειγμα:

.redStyle( color:red; font-family:Arial; ) .article( font-size:22px; ) Τίτλος άρθρου

Πρώτη παράγραφος

Μια άλλη παράγραφος

var article = document.querySelector("div.art"); // ρύθμιση μιας νέας κλάσης article.className = "redStyle"; // λάβετε το όνομα της τάξης document.write(article.className);

Αυτό εξαλείφει την ανάγκη διαμόρφωσης κάθε μεμονωμένης ιδιότητας χρησιμοποιώντας την ιδιότητα στυλ.
Ωστόσο, θα πρέπει να ληφθεί υπόψη ότι η προηγούμενη τιμή του χαρακτηριστικού class θα διαγραφεί. Επομένως, εάν χρειάζεται να προσθέσετε μια κλάση, τότε θα πρέπει να συνδυαστεί με την παλιά κλάση:

Article.className = article.className + "blueStyle";

Αλλά εάν πρέπει να καταργήσετε εντελώς όλες τις κλάσεις, μπορείτε να αντιστοιχίσετε την ιδιότητα className σε μια κενή συμβολοσειρά:

ArticleDiv.className = "";

Η ιδιότητα classList. Προσθήκη νέας κλάσης σε ένα στοιχείο.

Παραπάνω εξετάσαμε τον τρόπο προσθήκης κλάσεων σε ένα στοιχείο σε μια ιστοσελίδα, αλλά για να διαχειριστείτε έναν μεγάλο αριθμό κλάσεων είναι πιο βολικό να χρησιμοποιήσετε μια άλλη ιδιότητα, την classList. Αυτή η ιδιότητα είναι ένα αντικείμενο που υλοποιεί τις ακόλουθες μεθόδους:

• add(className): θα προσθέσει μια κλάση className
• remove(className): θα αφαιρέσει την κλάση className
• toggle(className): θα αλλάξει την κλάση του στοιχείου σε className. Δηλαδή, αν δεν υπάρχει κλάση, θα προστεθεί, και αν υπάρχει, θα αφαιρεθεί.

Var article = document.querySelector("div.art"); // αφαιρέστε την κλάση article.classList.remove("art"); // προσθήκη κλάσης

article.classList.add("redStyle"); // κλάση διακόπτη
article.classList.toggle("τέχνη");

Αποτελέσματα.

Για να ορίσετε μια κλάση, χρησιμοποιήστε τη μέθοδο className.

Για να ορίσετε το στυλ ενός στοιχείου μέσω του χαρακτηριστικού στυλ, χρησιμοποιείται η μέθοδος στυλ.

Για να προσθέσετε και να αφαιρέσετε μια κλάση σε ένα στοιχείο, χρησιμοποιήστε τις μεθόδους classList.add(className) και classList.remove(className).

Τελευταία ενημέρωση: 1/11/2015

Υπάρχουν κυρίως δύο προσεγγίσεις για την εργασία με ιδιότητες στυλ στοιχείων στο JavaScript:

Αλλαγή της ιδιότητας στυλ

Αλλαγή της τιμής του χαρακτηριστικού class

ιδιοκτησία στυλ

Η ιδιότητα στυλ αντιπροσωπεύει ένα σύνθετο αντικείμενο ελέγχου στυλ και αντιστοιχίζεται απευθείας στο χαρακτηριστικό στυλ ενός στοιχείου html. Αυτό το αντικείμενο περιέχει ένα σύνολο ιδιοτήτων CSS: ιδιότητα element.style.CSS. Για παράδειγμα, ας ορίσουμε το χρώμα της γραμματοσειράς:

Var root = document.documentElement; // ορίστε το στυλ root.style.color = "μπλε"; // λάβετε την τιμή στυλ document.write(root.style.color); //μπλε

Σε αυτήν την περίπτωση, το όνομα της ιδιότητας χρώματος είναι το ίδιο με την ιδιότητα css. Ομοίως, θα μπορούσαμε να ορίσουμε το χρώμα χρησιμοποιώντας css:

Html(χρώμα:μπλε; )

Ωστόσο, ορισμένες ιδιότητες css έχουν μια παύλα στα ονόματά τους, για παράδειγμα, font-family . Η JavaScript δεν χρησιμοποιεί παύλα για αυτές τις ιδιότητες. Μόνο το πρώτο γράμμα που έρχεται μετά την παύλα μετατρέπεται σε κεφαλαίο:

Var root = document.documentElement; root.style.fontFamily = "Verdana";

ιδιότητα className

Χρησιμοποιώντας την ιδιότητα className, μπορείτε να ορίσετε το χαρακτηριστικό class ενός στοιχείου html. Για παράδειγμα:

.blueStyle( color:blue; font-family:Verdana; ) .article( font-size:20px; ) Τίτλος άρθρου

Πρώτη παράγραφος

Δεύτερη παράγραφος

var articleDiv = document.querySelector("div.article"); // ορισμός νέας κλάσης articleDiv.className = "blueStyle"; // λάβετε το όνομα της τάξης document.write(articleDiv.className);

Χρησιμοποιώντας κλάσεις, δεν χρειάζεται να διαμορφώσετε κάθε μεμονωμένη ιδιότητα css χρησιμοποιώντας την ιδιότητα style.

Πρέπει όμως να ληφθεί υπόψη ότι η προηγούμενη τιμή του χαρακτηριστικού class έχει διαγραφεί. Επομένως, εάν χρειάζεται να προσθέσουμε μια κλάση, πρέπει να συνδυάσουμε το όνομά της με την παλιά κλάση:

ArticleDiv.className = articleDiv.className + "blueStyle";

Και αν πρέπει να καταργήσετε εντελώς όλες τις κλάσεις, μπορείτε να αντιστοιχίσετε μια κενή συμβολοσειρά στην ιδιότητα:

ArticleDiv.className = "";

ιδιότητα classList

Συζητήσαμε παραπάνω πώς να προσθέσετε κλάσεις σε ένα στοιχείο, αλλά για να διαχειριστείτε πολλές κλάσεις είναι πολύ πιο βολικό να χρησιμοποιήσετε την ιδιότητα classList. Αυτή η ιδιότητα αντιπροσωπεύει ένα αντικείμενο που υλοποιεί τις ακόλουθες μεθόδους:

add(className): προσθέτει μια κλάση className

remove(className): αφαιρεί την κλάση className

toggle(className): Εναλλάσσει την κλάση του στοιχείου σε className. Αν δεν υπάρχει κλάση, τότε προστίθεται, αν υπάρχει, αφαιρείται

Για παράδειγμα:

Var articleDiv = document.querySelector("div.article"); // αφαιρέστε την κλάση articleDiv.classList.remove("article"); // προσθήκη της κλάσης articleDiv.classList.add("blueStyle"); // εναλλαγή της κλάσης articleDiv.classList.toggle("article");

Και τι λένε, αυτές οι φωνές.

Ένα και. Ίδιο: Είμαι ο πωλητής, είμαι ο πωλητής. Τι θα κάνεις. Τι μπορείτε να κάνετε. Ναι, κρεμμύδι Ύδρα στη Ρωσία 2016. Και αυτό σημαίνει ότι ο Bull Gates δεν έρχεται σε επαφή.Δεν λειτουργεί.

Ή μήπως έρχεται. Αλλά δεν καταλαβαίνεις. Ίσως ο Μινώταυρος είναι αυτός ο νεκρός αρουραίος στο ταβάνι. . Ίσως έτσι.

Επιθυμία. Τότε προχωρήστε, . είπε ο Τσαπάεφ, σηκώνοντας πίσω από το ξενοδοχείο έκστασης.

Αφήνοντας το αυτοκίνητο του προσωπικού, πήγαμε στο πίσω μέρος του τρένου. Αυτό που συνέβαινε μου φαινόταν όλο και πιο παράξενο. Αρκετές από τις άμαξες που περάσαμε ήταν σκοτεινά και έμοιαζαν να είναι. Αδειάζω. Δεν υπήρχε φως πουθενά. Ούτε ένας ήχος δεν ακουγόταν πίσω από τις πόρτες. Δεν μπορούσα να πιστέψω ότι πίσω από τα πάνελ καρυδιάς, στην γυαλισμένη επιφάνεια των οποίων αντανακλούσε το φως του πούρου του Τσαπάεφ. Ο κόκκινος στρατιώτης κοιμάται, αλλά προσπάθησα να μην σκεφτώ αυτό. Μέχρι το 2003, Ιάπωνες ειδικοί. Ήταν δυνατό να αναπτυχθεί ένα σύνολο αρκετών μικροανιχνευτών που συνέδεαν άμεσα τον εγκέφαλο και κατέστησαν δυνατή, σε κάποιο βαθμό, την αντικειμενοποίηση της εικόνας της ανθρώπινης αντίληψης. Ο ιαπωνικός εξοπλισμός δεν μπορούσε να προσδιορίσει τι ακριβώς ένιωσε και τι σκέφτηκε το άτομο που παρατηρήθηκε. Αλλά κατέστησε δυνατή τη λήψη μιας έγχρωμης (αν και θολή) εικόνας αυτού που αυτός vape hydra.

Και όχι μόνο στην πραγματικότητα, αλλά και στην ταχεία φάση του ύπνου. Αυτό έγινε δυνατό επειδή το σήμα δεν ελήφθη από το οπτικό νεύρο, αλλά από αυτές τις ζώνες. Εγκέφαλοι που είναι υπεύθυνοι για την άμεση αναπαράσταση. Ο εξοπλισμός αγοράστηκε αμέσως από την ομάδα του Potashinsky. Το σήμα από ένα σύνολο ανιχνευτών που εμφυτεύονται στον εγκέφαλο θα μπορούσε να μεταδοθεί ασύρματα. Συνδέσεις που επέτρεψαν στον μπαμπλοναύτη να ζήσει μια φυσιολογική ζωή, χωρίς να περιορίζεται σε καμία περίπτωση από τη συμμετοχή στο πείραμα. Ήταν απαραίτητο μόνο να βρίσκεται κάπου κοντά ένας δέκτης σήματος. Το οποίο στη συνέχεια μετέδωσε πληροφορίες στον υπολογιστή σε πραγματικό χρόνο. Εν συντομία, το σχήμα των πειραμάτων του Potashinsky έμοιαζε ως εξής: Πρώτον, ένα σύνολο ηλεκτροδίων ελέγχου εμφυτεύθηκε στον εγκέφαλο του πειραματιστή-βαβλοναύτη (οι εθελοντές, ως συνήθως, επιλέχθηκαν από νεαρούς αξιωματικούς του FSB για αυτόν τον ρόλο).

Σύντομα. ερωτηθείς. Αγοράστε χασίς στο Βλαδιβοστόκ τώρα, είπα, εδώ... Κάποιος είναι επιλεκτικός. Ένας εραστής μπορεί να προσβληθεί που δεν του επιτρέπεται πέρα ​​από το διάδρομο του δικτύου. Αλλά ο Porfiry δεν είναι έτσι. Το πρώτο πράγμα που έκανα ήταν να συνδέσω τα γυαλιά της. Ωραία, είπε. Τι φαβορίτες... Εν τω μεταξύ, βάζω μια εικόνα με τα γυαλιά στο πάνελ. Μορφοποίηση του με θέα από την κάμερα οροφής. Ο Ιφάκ ανέβασε οποιαδήποτε μορφή χωρίς να καταπονήσει τη δύναμή του. Ήταν τερατώδες. Τώρα η Μάρα με είδε με τα γυαλιά της στη θέση του αϊφάκ και ταυτόχρονα μπορούσε να παρατηρήσει.

Μια ανεπτυγμένη κρυπτογράφηση. Μερικές φορές σημείωσε ότι βασανιζόταν ξανά από επαναλαμβανόμενα όνειρα σύμφωνα με το σχήμα 1. Ή σύμφωνα με το σχήμα 2. Και ξαφνικά, σε ανοιχτό κείμενο, σαν μια κραυγή διαφυγής: Ονειρεύτηκε ανακατεύοντας το κάπνισμα όλο το εικοσιτετράωρο,σκοτώθηκε από εμένα στην παιδική ηλικία... Μια φωνή πίσω από την οθόνη. Σώπασε. Τι κάνει; - ρώτησε ο Σαμ. «Κοιμήθηκα», απάντησε η Νατάσα. Ο Σαμ χάιδεψε απαλά την αγκαθωτή άκρη της κοιλιάς της και έγειρε πίσω στον καναπέ. Η Νατάσα κατάπιε ήσυχα. Ο Σαμ τράβηξε τη θήκη στο πάτωμα προς το μέρος του, την άνοιξε και έβγαλε μια μικρή γυάλινη θήκη. Το βάζο, έφτυσε κόκκινο μέσα του, το βίδωσε και το πέταξε πίσω - όλη αυτή η επιχείρηση τον πήρε να καπνίζει μείγματα όλο το εικοσιτετράωρο δευτερόλεπτα. «Ξέρεις, Νατάσα», είπε.

Μετά από αυτό αυτός χασίς άγιοςΓεια σου, Τατάρσκι. Καμία απάντηση. Ο Τατάρσκι περίμενε άλλο ένα λεπτό και κατάλαβε ότι έμεινε μόνος. Μόνος του με το μυαλό του έτοιμο να αγριέψει. Χρειαζόμουν επειγόντως να ασχοληθώ με κάτι. Κάλεσε, ψιθύρισε. - Σε ποιον. Γκιρέεφ. Ξέρει τι να κάνει. Για πολύ καιρό. Κανείς δεν απάντησε στο τηλέφωνο. Τελικά, στο δέκατο πέμπτο ή εικοστό ring, ο Gireev απάντησε με θλίψη: Γεια. Andryusha.

Όχι, είπε. Σε ένα κλειδωμένο δωμάτιο κάθεται ένας άντρας που δεν ξέρει κινέζικα. Του δίνουν σημειώσεις με ερωτήσεις στα κινέζικα μέσα από το παράθυρο. Για εκείνον, αυτά είναι απλά κομμάτια χαρτιού με ζωγραφισμένα σκιρτήματα, το νόημα των οποίων δεν καταλαβαίνει. Όμως το δωμάτιό του είναι γεμάτο διαφορετικά βιβλία. Κανόνες που περιγράφουν με λεπτομέρεια πώς και με ποια σειρά να απαντήσετε με απλά τσιμπήματα. Και αυτός, ενεργώντας σύμφωνα με αυτούς τους κανόνες, δίνει απαντήσεις στα κινέζικα σε άλλο παράθυρο. Δημιουργούν απόλυτη εμπιστοσύνη σε όλους όσους στέκονται έξω ότι ξέρει κινέζικα. Αν και ο ίδιος δεν καταλαβαίνει καθόλου για τι τον ρωτάνε. Απευθυνθείτε στο πρόγραμμα περιήγησης hydra onion ποιο είναι το νόημα των απαντήσεών του. Εισήχθη. Λοιπόν, το παρουσίασα. Το Sura είναι το ίδιο κινέζικο δωμάτιο, μόνο αυτοματοποιημένο. Αντί για ένα άτομο με βιβλία αναφοράς, υπάρχει ένας σαρωτής που διαβάζει ιερογλυφικά. Μια τεράστια βάση δεδομένων με αναφορές και κανόνες που σας επιτρέπουν να επιλέξετε ιερογλυφικά για την απάντηση.

Κατά ειρωνικό τρόπο, αυτό είναι που μου έφερε σαφήνεια. Τουλάχιστον σε πρακτικούς όρους. Συνειδητοποίησα το πρόβλημα που αντιμετώπιζα. Δεν είναι απλώς περίπλοκο, είναι άπιαστο. Ήταν δύσκολο ακόμη και να διατυπωθούν σωστά οι ερωτήσεις που σχετίζονται με αυτό. Η μόνη παρηγοριά φαινόταν να είναι Πώς να βρείτε την τοποθεσία Ύδρα στη γλώσσα Torus, η κατάσταση ήταν εξίσου ολισθηρή. Με ανθρώπινη συνείδηση. Δεν μπόρεσα να το αντιμετωπίσω αυτό. Και αποφάσισα ότι η καλύτερη διέξοδος από την κατάσταση θα ήταν να επιστρέψω. Στο business as usual, αφήνοντας τις υπαρξιακές ασκήσεις για αργότερα ή ξεχνώντας τις.

Σύντομα ο δρόμος οδηγούσε σε ένα πλούσιο χωριό με μια φρεσκοβαμμένη λευκή εκκλησία. Ένας λυπημένος, μονόποδος στρατιώτης με μια ξεθωριασμένη γκρίζα στολή καθόταν δίπλα στον φράκτη της εκκλησίας. Δεν ξέρετε πού είναι η Optina Pustyn. ρώτησε ο Τ. σκύβοντας προς το μέρος του από το άλογό του. Αυτό είναι που μιλάνε παιδιά. ρώτησε ο στρατιώτης. Το οποίο δημιουργήθηκε πρόσφατα ως εγκατάσταση. Αποφάσισα ότι ο στρατιώτης δεν είχε μυαλό. Πώς δημιουργήθηκε πρόσφατα αυτό το μέρος. Που σημαίνει, εν πάση περιπτώσει, όλα είναι ίσια, τιμή σου, είπε ο στρατιώτης και Ύδρα ρουλέταχέρι, θα είσαι ακόμα μακριά. Υπάρχουν μόνο δύο δρόμοι εδώ, και οι δύο πηγαίνουν προς μια κατεύθυνση. Πάρτε την πρώτη διαδρομή ή τη δεύτερη. Αν θέλετε μια πιο σύντομη διαδρομή, τότε μέσα από το δάσος. Υπάρχει ένα πιρούνι εκεί, ώστε να μπορείτε να πάρετε οποιαδήποτε πλευρά.

Και άλλες γκριμάτσες, για τις οποίες νομίζω ότι έχετε ακούσει πολλά... Η Λένα δεν κατάλαβε τι είδους ανόητος μπαμπά-μαμά ήταν το δεκαοχτώ (ο νεαρός μουρμούρισε αυτά τα λόγια γρήγορα και ήσυχα), αλλά αμέσως το ξέχασε - ξαφνικά θέλησε να πιει μια γουλιά σε τέτοιο βαθμό κρασί αξίας είκοσι χιλιάδων ευρώ που βούρκωσε το στόμα της. Ένας ήσυχος αναστεναγμός πέρασε από την αίθουσα, επιβεβαιώνοντας ότι οι συγκεντρωμένοι δεν είχαν ακούσει απλώς για μορφασμούς. Και καταφέραμε να μελετήσουμε με μεγάλη λεπτομέρεια όλες τις διαθέσιμες πληροφορίες για αυτούς. ΣΕ πρόσφαταΟι δυτικές υπηρεσίες πληροφοριών έχουν ξεκινήσει ένα πραγματικό κυνήγι για τους πλούσιους κλούτζες μας», συνέχισε ο νεαρός. - Έχετε ακούσει, φυσικά, για τα μεγάλα σκάνδαλα διεύθυνση hydra onion tk okey site hydra in torusσυλλήψεις: πρώτα η Courchevel, μετά τα Φίτζι, μετά η μπουτίκ Hermes και τώρα το Saint Moritz, οι Μαλδίβες και η Ανταρκτική. Η εκστρατεία είναι προσεκτικά σχεδιασμένη και έχει δύο βασικούς στόχους - πρώτον, την απαξίωση. Ρωσικός πολιτισμός - να εδραιώσει τον έλεγχο των πόρων του συλλέγοντας συμβιβαστικά στοιχεία για τους ιδιοκτήτες των κύριων περιουσιακών του στοιχείων. Η ελίτ μας έχει γίνει στόχος και η αντικειμενική πραγματικότητα του τρέχοντος σημείου στο χωροχρόνο είναι τέτοια που. Γίναμε στόχοι μαζί της. Συνοφρυωμένος, σώπασε, σαν να έδινε την ευκαιρία στους ακροατές του να αντιληφθούν τη σοβαρότητα της κατάστασης. Τότε το λυπημένο χαμόγελο επέστρεψε στο πρόσωπό του και συνέχισε: Πρέπει να κρατήσουμε την κατάσταση υπό έλεγχο.

Εκείνη χαμογέλασε. Τουλάχιστον δεν χρειάζεται να προσποιείσαι την αθωότητα μπροστά στους δικούς σου ανθρώπους. Σχετικά με το τι. Όταν τον προκάλεσα. Όταν πήδηξε έξω γυμνή από Είσοδος κρεμμυδιού Ύδραςκαι στάθηκε μπροστά του σκυλάκι. Το θεωρείτε πρόκληση. Σίγουρα. Γιατί, αναρωτιέμαι, του γύρισες την πλάτη; ανασήκωσα τους ώμους μου. Για αξιοπιστία. Τι είναι ιδιαίτερα αξιόπιστο σε αυτό; Η ουρά είναι πιο κοντά στον στόχο», είπα, όχι με απόλυτη σιγουριά. Λοιπόν. Και πρέπει να κοιτάξεις πάνω από τον ώμο σου.

Τρίτος montal vanilla ecstasyως εξής: Στην Εξοχότητά O. Konstantin Petrovich Pobedonostsev, επίσημος. Διαβιβάζω στην Εξοχότητά σας μετάφραση αρχαίας αιγυπτιακής επιγραφής. Ένα φύλλο χρυσού βρέθηκε σε ένα μετάλλιο montal vanilla ecstasyτο πτώμα του πατέρα Varsonofiy Netrebko στο πλαίσιο της έρευνας για την υπόθεση του Κόμη T. Σύμφωνα με ειδικούς από το Αιγυπτιακό Μουσείο, το περίγραμμα των ιερογλυφικών μας επιτρέπει να χρονολογήσουμε το κείμενο στην εποχή της 18ης δυναστείας ή λίγο αργότερα. Η επιγραφή γράφει: Το μυστικό όνομα του ερμαφρόδιτου με κεφάλι γάτας, που δίνει δύναμη πάνω του, είναι η ουσία. ANGC. Εάν μπορείτε να ελέγξετε έναν ερμαφρόδιτο με αυτό το όνομα. Πρόστιμο. Μεταφραστές ότι το ANGC μπορεί επίσης να μεταφραστεί ως το παραδοσιακό BHGV (ή αλλιώς, ανάλογα με την επιλογή των πινάκων αντιστοιχίας κατά τη χρήση ιερογλυφικών καταχωρητών). Το ίδιο το μετάλλιο όμως δεν μπορεί να μεταφερθεί στην Εξοχότητά σας παρά το αίτημά σας.

Πλοήγηση ανάρτησης

Σε αυτό το άρθρο, θα εξετάσουμε διάφορες μεθόδους εργασίας με κατηγορίες στοιχείων και στυλ. Ας εξοικειωθούμε με τις ιδιότητες classList και style, και παραδείγματα χρήσης τους για τη διαχείριση των κλάσεων και των στυλ στοιχείων στη σελίδα, αντίστοιχα.

Διαχείριση κλάσεων στοιχείων

Ο πρώτος τρόπος αλληλεπίδρασης με κλάσεις στοιχείων είναι να χρησιμοποιήσετε την ιδιότητα className DOM.

Αυτή η ιδιότητα είναι μια αντανάκλαση του χαρακτηριστικού κλάσης στο DOM. Η ιδιότητα DOM className δεν ονομάστηκε κλάση λόγω του γεγονότος ότι προηγουμένως στη JavaScript, οι δεσμευμένες λέξεις δεν μπορούσαν να χρησιμοποιηθούν για την ονομασία ιδιοτήτων αντικειμένων. Εάν δεν γνωρίζετε ποιες είναι οι ιδιότητες DOM και πώς διαφέρουν από τα χαρακτηριστικά, τότε μπορείτε να διαβάσετε σχετικά σε αυτό το άρθρο.

Ένα παράδειγμα στο οποίο θα εκτελέσουμε διάφορες λειτουργίες σε μια κλάση στοιχείων χρησιμοποιώντας την ιδιότητα DOM className:

var elem = document.querySelector("#alert"); // προσθήκη κλάσης στο στοιχείο elem.className = "alert"; // "alert" // αλλαγή της κλάσης του στοιχείου elem.className = "alert-warning"; // "alert-warning" // λάβετε την τιμή της κλάσης και αποθηκεύστε την στο className var classElem = elem.className; // "alert-warning" // αφαιρέστε την κλάση από το στοιχείο elem.className = ""; // ""

Ο δεύτερος τρόπος εκτέλεσης πράξεων που σχετίζονται με την κλάση ενός στοιχείου είναι η χρήση μεθόδων για τον χειρισμό ιδιοτήτων.

Ένα παράδειγμα στο οποίο θα εκτελέσουμε τις ίδιες ενέργειες με τον παραπάνω κώδικα, αλλά χρησιμοποιώντας μεθόδους διαχείρισης ιδιοτήτων:

var elem = document.querySelector("#alert"); // προσθήκη κλάσης στο στοιχείο elem.setAttribute("class", "alert"); // αλλαγή της κλάσης του στοιχείου elem.setAttribute("class", "alert-warning"); // λάβετε την τιμή της κλάσης και αποθηκεύστε την στο className var classElem = elem.getAttribute("class"); // "alert-warning" // αφαίρεση της κλάσης από το στοιχείο elem.removeAttribute("class");

Η ιδιότητα DOM className και το χαρακτηριστικό class είναι πάντα συγχρονισμένα μεταξύ τους, πράγμα που σημαίνει ότι όταν αλλάζει το ένα, αλλάζει και το άλλο.

Αλλά ένα στοιχείο μπορεί να έχει περισσότερες από μία κλάσεις, αλλά πολλές. Σε αυτή την περίπτωση, η εργασία μαζί τους ως χορδή δεν είναι πολύ βολική.

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

Ένα παράδειγμα στο οποίο ελέγχουμε αν ένα στοιχείο έχει την κλάση content__show:

... var elem = document.querySelector("#content");

if ((" " + elem.className + " ").indexOf(" content__show ") > -1) ( // το στοιχείο έχει την κατηγορία content__show) αλλιώς ( // το στοιχείο δεν έχει την class content__show)

Η ιδιότητα classList είναι ένα ειδικό αντικείμενο (DOMTokenList) που περιέχει μεθόδους για την εκτέλεση διαφόρων λειτουργιών στις κλάσεις του στοιχείου.

Μέθοδοι classList:

• .add(className1[,className2,...]) - προσθέτει μία ή περισσότερες καθορισμένες κλάσεις στο στοιχείο. Εάν ένα στοιχείο έχει ήδη αυτήν την κλάση, δεν θα προστεθεί σε αυτήν.
• .remove(className1[,className2,... ]) - αφαιρεί μία ή περισσότερες καθορισμένες κλάσεις από ένα στοιχείο. Εάν το στοιχείο δεν έχει την κλάση που θέλετε να καταργήσετε, τότε δεν θα γίνει καμία ενέργεια.
• .contains(className) – ελέγχει εάν ένα στοιχείο έχει κλάση. επιστρέφει true ή false ως απάντηση.
• .toggle(className [,flag]) - εναλλάσσει το καθορισμένο όνομα κλάσης του στοιχείου, π.χ. εάν το στοιχείο έχει αυτήν την κλάση, τότε την καταργεί. διαφορετικά προσθέτει. Η δεύτερη παράμετρος (σημαία) είναι προαιρετική. Από προεπιλογή είναι απροσδιόριστο. Εάν το ορίσετε σε true ή false , θα λειτουργήσει όπως η μέθοδος προσθήκης ή αφαίρεσης, π.χ. είτε προσθέστε μια κλάση σε ένα στοιχείο είτε αφαιρέστε μια από αυτό.

Ένα παράδειγμα που δείχνει πώς μπορείτε να εκτελέσετε διάφορες ενέργειες που σχετίζονται με κλάσεις στοιχείων χρησιμοποιώντας μεθόδους classList:

// λάβετε το στοιχείο με id = "sidebar" var sideBar = document.querySelector("#sidebar"); // αλλάξτε την κλάση hidden-xs του στοιχείου, π.χ. εάν το στοιχείο το έχει, τότε αφαιρέστε το. και αν αυτή η κλάση δεν υπάρχει, τότε προσθέστε την σε αυτήν sideBar.classList.toogle("hidden-xs"); // προσθήκη τριών επιπλέον κλάσεων στο sideBar element.classList.add("col-xs-6","col-sm-4","col-md-3"); // αφαιρέστε την κλάση hidden-xs από το στοιχείο sideBar.classList.remove("hidden-xs"); // ελέγξτε αν το στοιχείο έχει κλάση hidden-lg και αν ναι, προσθέστε ένα άλλο hidden-md σε αυτό if (sideBar.classList.contains("hidden-lg") ( myID.classList.add("hidden-md" ; )

Το αντικείμενο classList είναι ένας ψευδοπίνακας, δηλ. μπορεί να επαναληφθεί ως πίνακας.

Ένα παράδειγμα στο οποίο θα επαναλάβουμε όλες τις κλάσεις του classList:

... var content = document.querySelector(".content"); // Επιλογή αριθ. 1. Με τη χρήση για βρόχο// classList.length - αριθμός κλάσεων για ένα στοιχείο // οι κλάσεις στο classList υπολογίζονται από το 0 για (var i = 0, μήκος = content.classList.length; i< length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); }

Η ιδιότητα classList υποστηρίζεται από όλα τα σύγχρονα προγράμματα περιήγησης. Εάν χρειάζεστε υποστήριξη για πολύ παλιά προγράμματα περιήγησης (για παράδειγμα, Internet Explorer 8, 9), τότε σε αυτήν την περίπτωση μπορείτε να χρησιμοποιήσετε κάποιο είδος πολυπλήρωσης.

Στυλ στοιχείων

Στο DOM, κάθε στοιχείο έχει μια ιδιότητα στυλ με την οποία μπορούμε να ελέγξουμε τα στυλ του. Εννοια αυτής της ιδιοκτησίαςείναι ένα αντικείμενο που είναι μόνο για ανάγνωση. Η ρύθμιση στυλ για ένα στοιχείο σε αυτήν την περίπτωση γίνεται με την προσθήκη κατάλληλων ιδιοτήτων σε αυτό.

Ένα παράδειγμα για το πώς μπορείτε να προσθέσετε στυλ σε ένα στοιχείο μέσω της ιδιότητας στυλ DOM:

Square var Square = document.querySelector(".square"); Square.style.width = "170px"; Square.style.height = "170px"; Square.backgroundColor = "πράσινο";

Τα ονόματα των ιδιοτήτων του αντικειμένου στυλ είναι συνήθως τα ίδια με τα ονόματα των ιδιοτήτων CSS. Οι μόνες εξαιρέσεις είναι εκείνες οι ιδιότητες CSS που χρησιμοποιούν παύλα. Για παράδειγμα, χρώμα φόντου . Στην περίπτωση αυτή, η παύλα και το γράμμα που ακολουθεί αντικαθίστανται με κεφαλαία. Για παράδειγμα, η ιδιότητα χρώματος φόντου CSS για ένα αντικείμενο στυλ θα καθορίζεται ως backgroundColor . Και, για παράδειγμα, μια ιδιότητα CSS με πρόθεμα προγράμματος περιήγησης -webkit-border-radius - όπως το WebkitBorderRadius.

Αφαίρεση στυλ

Για παράδειγμα, ας ορίσουμε το σώμα σε κάποιο χρώμα φόντου:

Document.body.style.backgroundColor = "#eee";

Εάν τώρα πρέπει να αφαιρέσουμε αυτό το στυλ, τότε για να το κάνουμε αυτό πρέπει απλώς να του αντιστοιχίσουμε μια κενή συμβολοσειρά:

Document.body.style.backgroundColor = "";

Παραδείγματα χρήσης της ιδιότητας στυλ DOM για τον ορισμό στυλ για στοιχεία.

// ορίστε το χρώμα του κειμένου σε κόκκινο για το στοιχείο με id = "introtext" χρησιμοποιώντας στυλ document.querySelector("#introtext").style.color = "κόκκινο"; // ορίστε όλα τα στοιχεία p στη σελίδα χρησιμοποιώντας στυλ για να ορίσετε το χρώμα του κειμένου σε πράσινο var paragraphs = document.querySelectorAll("p"); για (var i = 0, μήκος = παράγραφοι.μήκος; i< length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все Ιδιότητες CSSστοιχείο με αναγνωριστικό "introtext" var styleElem = document.querySelector("#introtext").style; για (var i = 0, μήκος = styleElem.length; i< length; i++) { console.log(styleElem[i]); }

Ιδιότητα cssText

Εκτός από τη μεμονωμένη ρύθμιση στυλ για ένα στοιχείο, μπορούμε να τα ορίσουμε αμέσως χρησιμοποιώντας την ειδική ιδιότητα style.cssText . Αυτό γίνεται εκχωρώντας σε αυτήν την ιδιότητα μια συμβολοσειρά που αποτελείται από ένα σύνολο στυλ που χωρίζονται με ένα ερωτηματικό. Εκείνοι. Αυτό γίνεται με παρόμοιο τρόπο με τον τρόπο που ορίζουμε στυλ στο χαρακτηριστικό στυλ HTML.

Ένα παράδειγμα στο οποίο ορίσαμε τα στυλ "font-size:40px; color:blue;" στοιχεία με την εισαγωγική τάξη:

//λήψη στοιχείων με την κλάση εισαγωγής var intro = document.querySelectorAll("intro"); //set "font-size:40px; color:blue;" όλα τα στοιχεία της συλλογής που περιέχονται στην εισαγωγή για (var i = 0, μήκος = intro.length; i< length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }

Πρέπει να είστε προσεκτικοί όταν ορίζετε στυλ χρησιμοποιώντας την ιδιότητα style.cssText. Αυτό οφείλεται στο γεγονός ότι όταν ορίζεται, αυτή η ιδιότητα αφαιρεί όλα τα στυλ που έχει το στοιχείο. Εκείνοι. αυτά που ορίσαμε για αυτό χρησιμοποιώντας το χαρακτηριστικό style και στην αντίστοιχη ιδιότητα DOM.

Μπορείτε να εκτελέσετε μια λειτουργία παρόμοια με αυτή που εκτελείται από την ιδιότητα style.cssText χρησιμοποιώντας τη μέθοδο setAttribute.

Για παράδειγμα:

//πάρτε το πρώτο στοιχείο με την κλάση εισαγωγής var info = document.querySelector("info"); //ορίστε το στο στυλ "margin: 10px; padding: 10px; border: 1px solid green;" info.setAttribute("style", "margin: 10px; padding: 10px; border: 1px solid green;");

αποστολές

1. Γράψτε ένα σενάριο χρησιμοποιώντας classList για να ορίσετε ένα στοιχείο με την κλάση κειμένου σε τρεις κατηγορίες: size-40 , color-red και bg-yellow:

.size-40 (μέγεθος γραμματοσειράς: 40 px; ) .color-red (χρώμα: κόκκινο; ) .bg-yellow (φόντο: κίτρινο; )

Κάποιο κείμενο...

2. Γράψτε κώδικα για να ορίσετε το στυλ "width: 180px; height: 180px;" όλα τα στοιχεία στη σελίδα με μια κλάση που ξεκινά με τις λέξεις block- .