1

基本的にオンラインで名刺を作成するものに取り組んでいます。

divタグをCSSでレイアウトしようとしています。次に、イメージを作成できるように PHP GD ライブラリに渡すことができるように、コンテナに関連するタグの座標を取得したいと考えてxいます。ydiv

.position()jqueryで関数を使用してみましたが、相対的な位置を示しています。

誰にも役立つポインタはありますか？

4

2 に答える 2

4

要素の正しい位置を見つけるには、 jQuery ディメンション プラグインを確認してください。

編集: コメントで述べたように、ディメンション プラグインはコアにマージされました。ドキュメントはここにあります: offsetと here position。

リンクされた例は次のように拡張できます: 次のコードを置き換えます

var x = $("#Company_Name").position().left;
var y = $("#Company_Name").position().top;

$("p:last").text( "Full Name: left: " + x + ", top: " + y );

これとともに：

var $companyname = $("#Company_Name");
var x = $companyname.position().left;
var y = $companyname.position().top;
var ax = $companyname.offset().left;
var ay = $companyname.offset().top;

$("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);

要素を 1 回だけ検索して、変数に詰め込んだことに注意してください。検索に時間がかかる場合は、これをお勧めします。

EDIT2: これが期待どおりに機能しないことに気付きました。相対位置を計算する関数をいくつか書きました。

function toString(obj){
        return "{top: " + obj.top + " left: " + obj.left + "}";
    }

    function getRelativePosition(selector){

        var $parentElem = $("#parentElem");
        var $element = $(selector);

        var elementPosition = $element.position();
        var parentPosition = $parentElem.position();

        return {top: elementPosition.top - parentPosition.top, 
            left: elementPosition.left - parentPosition.left};
    }

  $(document).ready(function(){

        var position = $("#Company_Name").position();
        var relativePosition = getRelativePosition("#Company_Name");

        $("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition));
    });

これがうまくいくかどうか教えてください。そして、誰かがjQueryの位置とオフセットの違いを教えてくれるかもしれません:-\

EDIT3： 複数の要素の位置を取得するには、異なるIDで関数を呼び出すか、すべて同じ名前または同じクラスを指定して、それらすべてを選択する何かを持たせることができます. これが実際の例です：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

function toString(obj){
    return "{top: " + obj.top + " left: " + obj.left + "}";
}

function getRelativePosition(selector){

    var $parentElem = $("#parentElem");
    var $element = $(selector);

    var elementPosition = $element.position();
    var parentPosition = $parentElem.position();

    return {top: elementPosition.top - parentPosition.top, 
        left: elementPosition.left - parentPosition.left};
}

$(document).ready(function(){

$(".cardfield").each(function(i){

    var position = $(this).position();
    var relativePosition = getRelativePosition(this);

    $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>");

});
});

</script>
</head>
<body>

<br><br><br><br><br>

<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;">
<br><br>
<div class="cardfield" id="Company_Name1">Foo Bar</div>
<br>
<div class="cardfield" id="Company_Name2">Company Name</div>
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/>
<div class="cardfield" id="lastname" style="float: right;">B&uuml;the</div>
<br><br>
</div>

</p></p>
</body>
</html>

注: すべてのフィールドに「cardfield」クラスを指定し、jQuery を使用してそれらを選択しました。次に、each関数を使用して要素を操作しました。それぞれに与えた関数内で、「this」は現在のオブジェクトを参照します。

于 2009-04-07T10:53:42.187 に答える
0

アブソリュートを使用したエレメントの完全な位置について

var position = window.jQuery(this).position();

var parent_pos = window.jQuery(this).parent().position();

var xpos = position.top - parent_pos.top;
var ypos = position.left - parent_pos.left;

親の div 名または id 全体を指定すると、次のように記述できます。

var parent_pos = window.jQuery(this).parent('#cardcreate').position();

これは完璧に機能します。

于 2012-11-30T11:17:04.740 に答える