AJAXのお勉強

jQuery オブジェクトの位置を取得＠AJAX

jQueryのプラグインであるdimensionsを用いて、
オブジェクトの位置情報を取得します。

http://plugins.jquery.com/project/dimensionsにて入手できます。

以下では、実行ボタンを押下により、
divの高さ、幅、位置を取得して、alertで表示しています。

取得は簡単で、取得したいオブジェクトを設定して、
heigh()、width()、position()を利用するだけです。
他にも情報が取得できます。


<html>
<head>
<title>jQuery オブジェクトの位置を取得</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript">
<!--

function getPosition() {

    alert("高さ：" + $("#contents").height());
    alert("幅：" + $("#contents").width());

    alert("上：" + $("#contents").position().top);
    alert("左：" + $("#contents").position().left);
}

// -->
</script>
</head>
<body>

<input type="button" value="実行" onclick="getPosition()">

<div id="contents" style="border:1px solid #CCCCCC;width:400px;height:400px"></div>

</body>
</html>

Copyright (C) 2008 AJAXのお勉強. All Rights Reserved.