我为什么会收到错误：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"; 

Why am I getting this error"?

Answer 1

使用jQuery的.css（）函数，因为这基本上就是您使用jQuery的原因：

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

Answer 2

The error is because $("#opening_0") returns a jQuery object which wraps the matched DOM nodes. To get to the underlying DOM nodes, you can treat it like an array: $("#opening_0")[0] will work, for example.

But , this approach won't work well, since style.left will return a string which could have px or percentage values. You could use $("#opening_0").offset().left instead which will always return a numerical value.

Answer 3

jQuery objects do not have a style property.

If you want to have access to it, either use the vanilla javascript way:

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

...or "unwrap" the jQuery object like so:

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

I'd recommend using the first method. Just remember to parse the value by using parseInt() .