1

我正在做一些基本上可以在线创建名片的事情。

我正在尝试用 CSS 布置div标签。然后我想获取标签相对于它们的容器x的y坐标，div以便可以将其传递给 PHP GD 库，以便制作图像。

我尝试.position()在 jquery 中使用该函数，但它给出了相对位置。

有没有人有任何可能有帮助的指示？

4

2 回答 2

4

查看jQuery 尺寸插件以找到元素的正确位置。

编辑： 如评论中所述，维度插件已合并到核心中。可以在此处找到文档：offset和此处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);

请注意，我只搜索了一次元素并将其填充到变量中。如果搜索需要一些时间，这是个好主意。

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 回答