具有宽度/高度的图像的jQuery DOM元素生成器中的错误? [英] Bug in jQuery DOM element builder for Images with width/height?

问题描述

jQuery 1.4文档描述了如何使用jQuery快速创建DOM元素.来自提供的HTML字符串和属性集.例如:

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

这太好了；但是，对于具有宽度和高度的图像使用此快捷方式时，似乎存在一个错误.代替设置属性(如 attr()函数所示)，而是设置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中的错误还是出于某种原因的预期行为?

解决方案

引用 jQuery方法

从jQuery 1.4 开始，第二个参数可以接受由 超集 组成的映射，该映射可以传递给 .attr() 方法.此外，可以传入任何事件类型，并且可以调用以下jQuery方法: val，css，html，文本，数据，宽度，高度，或偏移量.

因此，这些属性由它们各自的方法处理，并且 .width() 和<一个href ="http://api.jquery.com/height/#height2" rel ="nofollow"> .height() 在样式属性中应用其值.

---

以下评论的后续内容:

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

更恰当地说，这是一个API错误，需要解决.已在此处提交错误报告.

.

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

---

更新:jQuery已经确认了冲突，但不会提供任何适合其用户在创建元素时在props参数中应用width和height的修补程序.

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

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

The jQuery 1.4 docs describe how jQuery can be used to create DOM elements on the fly from a provided HTML string and set of attributes. For example:

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

This is great; however, there appears to be a bug when using this shortcut for images with width and height. Instead of setting the attributes (as implied by the attr() function) it sets the CSS style:

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

This is even more confusing since jQuery behaves as expected when given a new image from the constructor:

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

Is this just a bug in jQuery 1.4.2 or expected behavior for some reason?

解决方案

Quoting the 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.

So, these properties get handled by their respective methods, and .width() and .height() apply their values in the style attribute.

---

Followup from comments below:

At the very least it is a documentation bug that jQuery doesn't acknowledge the conflict between the legitimate height and width properties, and the jQuery methods of the same name.

More appropriately it's an API bug that needs to be addressed. A bug report has been filed here.

Note that this only affects the optional props argument when creating elements. The .attr() method works correctly with respect to width and height.

---

Update: jQuery has acknowledged the conflict but won't provide any fix suitable to allow its users to apply width and height in the props argument when creating elements.

As such, those properties are unsupported for assignment in that manner. You'll need to apply those properties apart from the rest in a separate function call to .attr(), which does correctly support them.

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

这篇关于具有宽度/高度的图像的jQuery DOM元素生成器中的错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！