Slik finner du ut koordinatene til et element i Javascript?

March 13

Skjermen koordinatene til et element er spesifisert i sin stil erklæring og lagret av nettleseren innen Document Object Model (DOM) i den viste HTML-side. Hvert element i den DOM er gitt en identitet streng (id). En Javascript-kode kan få tilgang til et bestemt element med denne identiteten strengen som en referanse, og kan skaffe de spesielle verdiene for "venstre" og "toppen" koordinatene elementene i nettleservinduet.

Bruksanvisning

1 Åpne en ny fil i tekstredigeringsprogram og lagre det som "coordinates.HTML." Skriv eller kopier denne HTML-dokument erklæring kode i filen:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

2 Skriv eller kopier denne HTML <head> kode i filen:

<Head>

<title>Element Coordinates.</title>

& Lt; meta content = "text / html; charset = utf-8" http-equiv = "Content-Type" />

eske

{

position: absolute;

z-index: 1;

synlighet: synlig;

bredde: 10.0em;

høyde: 5.0em;

top: 1.0em;

venstre: 1.0em;

border: 2px solid #ccc;

-moz-border-radius: 0.5em;

-webkit-border-radius: 0.5em;

text-align: center;

padding: 1.0em;

}

p {

font-size: 1.2em;

font-weight: 900;

color: # 000000;

}

</ Style>

var x;

Var y;

funksjons getCoordinates ()

{

x = Math.floor(Math.random()*40);

y = Math.floor (Math.random () * 30);

. Document.getElementById ( "boksen") style.left = x + "em";

. Document.getElementById ( "boksen") style.top = y + "em";

. X = document.getElementById ( "boksen") style.left;

y = document.getElementById ( "boksen") style.top.;

alert ( "venstre =" + x);

alert ( "top =" + y);

}

</ Script>

</ Head>

3 Skriv eller kopier denne HTML <body> kode i filen:

<Body>

<P>

Ta på meg!

</ P>

</ Div>

</ Body>

</ Html>

4 Lagre filen og åpne den i nettleseren. Trykk på elementet og det vil flytte til en ny posisjon i nettleservinduet og vise "venstre" og "topp" koordinatverdier.