javascript - 如何使用变量获取元素的 CSS 信息？

Question

我有以下代码来创建一个 div。

function makeLinkdiv () {
  gCurrentBlock = $gBlockDivName + $gBlockPointer;
  var idPointer = gCurrentBlock;
  var linksBlock = $('<div id ="' + gCurrentBlock + '" class="LinksBlock EditBlock"></div>').appendTo("#canvas");
  linksBlock.draggable({containment: "#canvas", scroll: false, grid: [10, 10]}, {cursor: "move", cursorAt: {top: 125, left: 50}});
  linksBlock.append('<div class="article_title EditBlock fontCenter fontBold font24">Article Title</div>');
  //
  // log the div data to the div object
  //
  var x = gCurrentBlock.css('left');
  var y = gCurrentBlock.css('top');
  alert ('top is - ' + y + ' left is - ' + x);
  divData.items.push({ID: $gBlockPointer, Block: gCurrentBlock, posTop : "450", posLeft : "540" });
  //
  // increment the block pointer
  //
  $gBlockPointer = $gBlockPointer + 1;
  //
}

发生的事情是我没有获得顶部和左侧的 CSS 属性。实际上，什么也没有发生。我知道我使用变量 gCurrentBlock 的方式一定有问题，但我想不通。

Answer 1

不太确定您的代码试图完成什么......但是您需要检查 jQuery 的 position 和 offset 方法，它们将为您提供元素的坐标.

我希望您的代码看起来更像这样:

...
var position = $('#' + gCurrentBlock).position();
var x = position.left;
var y = position.top;
...

如果值不是您期望的值，请尝试将 position 更改为 offset。