; Οι συντεταγμένες της οθόνης ενός στοιχείου καθορίζονται στη δήλωση του στυλ και αποθηκεύονται από το πρόγραμμα περιήγησης στο πλαίσιο του Document Object Model ( DOM ) της εμφανιζόμενης σελίδας HTML . Κάθε στοιχείο εντός του DOM δίνεται μια συμβολοσειρά ταυτότητας ( id ) . Ο κώδικας JavaScript μπορεί να έχει πρόσβαση σε ένα ιδιαίτερο στοιχείο με αυτό τον όρο ταυτότητα ως σημείο αναφοράς και να αποκτήσει τις συγκεκριμένες τιμές για την «αριστερά» και «top» συντεταγμένες των στοιχείων μέσα στο παράθυρο του προγράμματος περιήγησης . Τα πράγματα που θα χρειαστείτε
επεξεργαστή κειμένου
πρόγραμμα περιήγησης στο Web
Η Εμφάνιση Περισσότερες οδηγίες
Η
1 Ανοίξτε ένα νέο αρχείο στον επεξεργαστή κειμένου και να το αποθηκεύσετε ως " coordinates.HTML . " Γράψτε ή να αντιγράψετε αυτό το έγγραφο HTML κώδικα δήλωσης στο αρχείο !
< DOCTYPE html PUBLIC " - //W3C //DTD XHTML 1.0 Strict //EN "
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " >
< br >
2
Γράψτε ή να αντιγράψετε αυτό το HTML
κώδικα μέσα στο αρχείο : .
Element Συντεταγμένες < /title> <br> <p> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <br> <p> < τύπος style = " text /css " > <br> <p> # κουτί <br> <p> { <br> <p> θέση: απόλυτη? <br> <p> z - index : 1 ? <br> <p> ορατότητα : ορατή? < br > <p> πλάτος: 10.0em ? <br> <p> ύψος : 5.0em ? <br> <p> top : 1.0em ? <br> <p> αριστερά : 1.0em ? <br> <p> σύνορα : 2px solid # ccc ? <br> <p> - moz - σύνορα - ακτίνα: 0.5em ? <br> <p> - webkit - σύνορα - ακτίνα: 0.5em ? <br> <p> text-align : center ? <br> <p> padding : 1.0em ? <br> <p> } <br> <p> p { <br> <p> font-size : 1.2em ? <br> <p> font-weight : 900 ? <br> χρώμα <p> : # 000000 ? <br> <p> } <br> <p> < /style> <br> <p> <script type="text/javascript"> < br > <p> var x ? <br> <p> var y ? <br> <p> getCoordinates λειτουργία () { <br> <p> <br> <p> x = η math.floor ( Math.random ( ) * 40 ) ? <br> <p> y = η math.floor ( Math.random ( ) * 30 ) ? . <br> <p> document.getElementById ( «κουτί» ) style.left = x + " em" ? <br> <p> document.getElementById ( «κουτί» ) style.top = y + " em" ? . . <br> <p> x = document.getElementById ( «κουτί» ) style.left ? <br> < p> y = document.getElementById ( «κουτί» ) style.top ? . <br> <p> alert (" αριστερά = " + x)? <br> <p> alert (" top = " + y ) ? < br > <p> } <br> <p> < /script > <br> <p> < /head> εικόνων <br> 3 <p> Γράψτε ή να αντιγράψετε αυτό το HTML <body> κωδικοποίηση στο αρχείο : <br> <p> <body> <br> <p> <div id="box" onmouseover="getCoordinates()"> <br> <p> <p> < br > <p> Touch me ! <br> </p > <br> <p> < /div > <br> <p> < /body> <br> <p> < /html > ? <br> Η <p> 4 Αποθηκεύστε το αρχείο και να το ανοίξετε στο πρόγραμμα περιήγησης στο web . Αγγίξτε το στοιχείο και θα προχωρήσουμε σε μια νέα θέση μέσα στο παράθυρο του προγράμματος περιήγησης και να εμφανίσει το « αριστερά » και « κορυφαία » τιμές των συντεταγμένων . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/javascript-programming/90935.html' >Πώς να αλλάξετε ένα PHP με JS </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/javascript-programming/90937.html' >Πώς να Περιστροφή κειμένου με JavaScript </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/javascript-programming/90983.html" target="_blank">Πώς να Απόκρυψη όλων των Open Divs σε JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/91283.html" target="_blank">Πώς να κάνω μια Javascript Slide Show </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90986.html" target="_blank">Πώς να Απόκρυψη από Class σε JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90997.html" target="_blank">Πώς να γράψει σε ένα Div Από JavaScript </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90782.html" target="_blank">Συνδυασμός JavaScript Hotkeys </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/javascript-programming/91010.html" target="_blank">Πώς να συνδέσετε εξωτερικές JS αρχεία </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90780.html" target="_blank">Διαφορά μεταξύ OnBeforeUnload & OnUnload </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/90844.html" target="_blank">Javascript για να καθορίσει εάν ένα στοιχείο είναι άτομα με ειδικές ανάγκες </a></li>
<li><a href="http://www.221021.com/Programming/javascript-programming/310876.html" target="_blank">Γιατί το JavaScript δεν είναι ο προγραμματισμός του διακομιστή; </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>