jquery - 具有宽度/高度的图像的 jQuery DOM 元素生成器中的错误？

Question

jQuery 1.4 docs描述如何使用 jQuery 从提供的 HTML 字符串和属性集动态创建 DOM 元素。例如:

var d = $('<div/>', {id:'foo', className:'bar'});
d; // => [<div id="foo" class="bar"></div>]
d.attr('id'); // => "foo"
d.attr('class'); // => "bar"

这太棒了；但是，当对具有宽度和高度的图像使用此快捷方式时，似乎存在错误。它不是设置属性(如 attr() function 所暗示的)，而是设置 CSS 样式:

var x = $('<img/>', {width:10, height:20});
x; // => [<img style=​"width:​ 10px;​ height:​ 20px;​ ">​]!!!
x.attr('width'); // => 0!!!
x.attr('height'); // => 0!!!

这更加令人困惑，因为当从构造函数给出新图像时，jQuery 的行为符合预期:

var y = $(new Image(10, 20));
y; // => [<img width=​"10" height=​"20">]
y.attr('width'); // => 10
y.attr('height'); // => 20

这只是 jQuery 1.4.2 中的一个错误还是出于某种原因的预期行为？

Answer 1

引用jQuery method

As of jQuery 1.4, the second argument can accept a map consisting of a superset of the properties that can be passed to the .attr() method. Furthermore, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset.

因此，这些属性由各自的方法处理，并且 .width()和 .height()在 style 属性中应用它们的值。

<小时/>

以下评论的跟进:

至少这是一个文档错误，jQuery 不承认合法的 height 和 width 属性与同名的 jQuery 方法之间的冲突.

更准确地说，这是一个需要解决的 API 错误。错误报告has been filed here .

请注意，这仅影响创建元素时的可选 props 参数。 .attr() 方法在 width 和 height 方面正常工作。

<小时/>

更新: jQuery 已承认存在冲突，但不会提供任何适合的修复程序以允许用户在创建元素时的 props 参数。

因此，不支持以这种方式分配这些属性。您需要在对 .attr() 的单独函数调用中将这些属性与其余属性分开应用，该函数确实正确支持它们。

var x = $('<img/>', { src:'some/path/to.jpg',
                      alt:'some text' }).attr({ width:100,
                                                height:100 });