Javascript derslerimize devam ediyoruz.Bu derste objenin sayfanın konumu almayı göreceğiz.Sayfanın sol en üst kısmı başlangıç noktasıdır.Konum olarak top yani üst ve left yani soldan uzaklık bilgilerini alacağız.Bunun için kullanacağımız komut
getBoundingClientRect() .Kullanımı ve işlevi jquery
position() ile aynı,tek fark jquery'nin yazımı akılda daha kalıcı.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript">
function pos(){
var konum=document.getElementById('alan').getBoundingClientRect(),//objeye erişiyoruz ve pozisyon bilgilerini alıp konum değişkenine atıyoruz
left=Math.round(konum.left),//objenin solda ne kadar uzak olduğunu alıyoruz
top=Math.round(konum.top);//objenin yukarıdan uzaklığını alıyoruz.
alert(left)
alert(top)//ekrana basıyoruz.
}
</script>
<style type="text/css">
*{margin:0;padding:0;}
#alan{width:100px;height:100px;margin:auto;margin-top:50px;background:red;}
</style>
</head>
<body onLoad="pos()">
<div id="alan"></div>
</body>
</html>
Yukarıda konumunu alacağımız objeye getElementById ile erişip getBoundingClientRect ile verileri aldık sonra,left ve top değerlerini alıp ekrana bastık.
UstaDerslik
