javascript – 使用jquery更改iframe属性

<iframe id="frame" width="200" height="150" 
    src="http://www.youtube.com/embed/GiZGEFBGgKU?rel=0&
amp&iv_load_policy=3;autoplay=1" frameborder="0" allowfullscreen></iframe>

$("#frame").setAttribute("width","50");
$("iframe").setAttribute("width","31");

正如Sarfraz已经指出的那样,为jquery选择器对象设置属性的正确方法是使用attr(“attrName”,“attrVal”). setAttribute不工作的原因是值得解释的,因为我不止一次地反对这一点：

当您使用jquery的选择器语法时,它返回一个在jquery中定义的对象 – 它本质上是选择器匹配的所有元素的列表.无论是匹配一个元素(应该始终为id选择器)或多个元素,返回的对象是元素列表,从不是单个DOM对象(例如单个元素). setAttribute是实际HTMLElement对象的一种方法.

这就是为什么

$("#frame")[0].setAttribute("width","200");

作品,但

$("#frame").setAttribute("width","200");

才不是. jquery元素没有这个方法,即使它的列表中的HTMLElement对象也是这样.

如果你想(无论什么原因)使用一个本机的HTMLElement方法(或一个方法与选择器返回的元素通用,如输入等),你可以使用jquery的each()方法,像这样：

// Set all iframes to width of 250
 $("iframe").each(
     function(index,elem) {
         elem.setAttribute("width","250");
     }
 );

each()方法的回调可以传递两个可选参数,第一个是选择器列表中的元素的索引,第二个是实际的DOM元素,可以调用本机DOM方法.

像我说的,我真的很沮丧,试图找出如何使用jquery的选择器结果与本机方法不止一次,所以我希望这有助于清除不仅为什么setAttribute()不起作用,而是一般的本机方法,以及如何在找不到jquery等效项时如何实际使其工作.