具有宽度/高度的图像的 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"

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

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

从 jQuery 1.4 开始，第二个参数可以接受由 superset 的属性组成的映射，这些属性可以传递给 superset strong>.attr() 方法。此外，可以传入任何事件类型，可以调用以下jQuery方法：val、css、html、text、data、width、height、或偏移。

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

---

来自以下 cmets 的跟进：

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

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

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

---

更新： jQuery 已承认冲突，但不会提供任何适合允许其用户在创建元素时在 props 参数中应用 width 和 height 的修复程序。 p>

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

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