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

从jQuery 1.4 开始，第二个参数可以接受一个地图，该地图包含可以传递给<的属性的超集 strong> .attr() 方法。此外，可以传入任何事件类型，并且可以调用以下jQuery方法： val，css，html，text，data， width ， height ，或偏移。

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

以下评论的跟进：

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

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

请注意，这仅在创建元素时影响可选的props参数。 .attr()方法适用于width和height。

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

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

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

有宽度/高度的图像的jQuery DOM元素构建器中的错误？

1 个答案: