我為什么會收到錯誤：Uncaught TypeError：無法讀取未定義的屬性“ left”

Question

HTML：

<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 45px; top: 45px; height: 202.5px; width: 157.5px; overflow: hidden; z-index: 4;" ondrop="drop(event, this)" ondragover="allowDrop(event)" onclick="photos_add_selected_fid(this);">&nbsp;</div>

使用Javascript：

canvas.style.left = $("#opening_0").style.left - img.width + "px"; 
canvas.style.top = $("#opening_0").style.top - img.height + "px"; 

為什么會出現此錯誤”？

Answer 1

使用jQuery的.css（）函數，因為這基本上就是您使用jQuery的原因：

canvas.style.left = parseInt($("#opening_0").css('left')) - img.width + "px"; 

Answer 2

該錯誤是因為$("#opening_0")返回包裝了匹配的DOM節點的jQuery對象。 要訪問底層的DOM節點，可以將其視為數組：例如， $("#opening_0")[0]將起作用。

但是 ，此方法效果不好，因為style.left將返回可能具有px或百分比值的字符串。 您可以使用$("#opening_0").offset().left代替，它將始終返回數字值。

Answer 3

jQuery對象沒有style屬性。

如果您想訪問它，請使用香草javascript方法：

document.getElementById("opening_0").style.left;

...或“解開” jQuery對象，如下所示：

$("#opening_0")[0].style.left;

我建議使用第一種方法。 只需記住使用parseInt()解析值即可。