Question

我有类似的东西：

        <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");

他们都没有工作

Answer 1

正如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时如何实际让它们工作。

Answer 2

怎么样：

$('#frame').width(x)

或

$('#frame').attr("width","50");

Answer 3

1）使用attr：

$("#frame").attr("width", "31");

2）使用DOM对象：

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

Answer 4

$(document).ready( function() {
var ysr = $('iframe').attr('src');
var nysr = ysr + "HD=1;rel=0;showinfo=0";
$('iframe').attr('src', nysr);});

Answer 5

编辑：看到你确实有id。你能看看代码是否真的在运行吗？就像被触发一样？另外，请尝试将allowfullscreen更改为allowfullscreen="true"

使用jquery更改iframe属性

5 个答案: