Question

我尝试过在本网站上找到的解决方案。但是，它对我不起作用。我在想有一个脚本将其设置在其他地方，所以我需要在页面中添加一些代码来覆盖样式。

我试过了：

<script type="text/javascript">
    $(document).ready(function () {
        $("#frame1").width(578);
        $("#frame1").height(326);
    });
</script>

然而，html仍然是这样的：

<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

我希望width为578而height为326。这是网站：http://beckindesigns.tumblr.com/

P.S。如果我添加一个类或ID，它会从html中删除它。我正在使用Tumblr ..

Answer 1

如果您向id="frame1"添加iframe，则会有效。

<iframe frameborder="0" id="frame1" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

$("#frame1")将选择ID属性为frame1的元素。供参考：jQuery Selectors和ID Selector。

更新：由于您说ID已被删除，您只需更改选择器的工作方式，并将其应用于所有iFrame：

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe").width(678);
        $("iframe").height(526);
    });
</script>

如果页面上有多个iFrame，并且您不希望它们具有相同的大小，则可以使用:eq(index)选择器，该选择器将匹配基于零的索引。因此，如果页面上有两个iFrame，并且只想更改第二个iFrame，请使用：

<script type="text/javascript">
    $(document).ready(function () {
        $("iframe:eq(1)").width(678);
        $("iframe:eq(1)").height(526);
    });
</script>

Answer 2

将iframe调整为窗口大小

<iframe frameborder="0" src="http://player.vimeo.com/video/20657168?color=fc030f" style="width: 500px; height: 281.25px;"></iframe>

<script>
    $(document).ready(function(){
       $("iframe").height($(window).height());
       $("iframe").width($(window).width());

       $( window ).resize(function() {
            $("iframe").height($(window).height());
            $("iframe").width($(window).width());
        });
    });
  </script>

使用jQuery更改iframe的宽度和高度？

2 个答案: