我有这样的东西:
<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>
我想使用jquery改变宽度和高度我试试:
$("#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等效项时如何实际使其工作.