我有这样的东西:
<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
对象有。
如果您想(无论出于何种原因)使用 native HTMLElement
方法(或选择器返回的元素通用的方法,例如输入等),您可以使用 jquery 的 each()
方法,像这样:
// Set all iframes to width of 250
$("iframe").each(
function(index, elem) {
elem.setAttribute("width","250");
}
);
each()
方法的回调可以传递两个可选参数,第一个是选择器列表中元素的索引,第二个是实际的 DOM 元素,您可以调用原生 DOM上的方法。
就像我说的,我真的很沮丧试图弄清楚如何多次使用 jquery 的选择器结果和本地方法,所以我希望这不仅有助于澄清为什么 setAttribute()
不起作用,但通常使用 native 方法,以及当您找不到等效的 jquery 时如何让它们真正起作用。
关于javascript - 使用 jquery 更改 iframe 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10083399/