Question

我需要iframe尺寸拉伸到他的容器，但有宽度和高度定义的属性。所以我想通过javascript改变它。这是我的出发点：

   <div class="emvideo emvideo-video emvideo-vimeo">
<div id="media-vimeo-1" class="media-vimeo">
        <iframe src="http://" width="425" height="350" frameborder="0"></iframe>
    </div>
    </div>

和我的JS代码：

jQuery(window).on('load', function()
    {
$("#media-vimeo-1 iframe").setAttribute('height: 100%');
 $("#media-vimeo-1 iframe").setAttribute('width: "100%"');
}

但没有任何改变。感谢

Answer 1

首先，jQuery没有setAttribute()方法;它是attr()。但是，当您设置iframe的高度和宽度时，您可以分别致电height()和width()。

另请注意，要在元素上设置100％高度，所有父元素都必须应用height，我在下面的示例中使用CSS完成了这些：

＆＃13;

jQuery(window).on('load', function() {
  $("#media-vimeo-1 iframe").height('100%').width('100%');
});

＆＃13;

html,
body,
.emvideo,
#media-vimeo-1 {
  height: 100%
}

iframe { background-color: #CCC; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="emvideo emvideo-video emvideo-vimeo">
  <div id="media-vimeo-1" class="media-vimeo">
    <iframe src="http://" width="425" height="350" frameborder="0"></iframe>
  </div>
</div>

＆＃13;

Answer 2

为什么要使用jQuery呢？仅使用CSS更改其高度和宽度。

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       
    background: #000;
    border: none;         
    height: 100vh;        
    width: 100vw;
}

使用JQuery更改iframe属性

2 个答案: