0 
<div style="width: 550px;" id="zuora_payment">
    <div style="display: inline;" class="z-overlay" id="z-overlay"></div>
    <div class="z-container" id="z-container">
        <div class="z-data" id="z-data">
            <iframe style="display: block;" class="z_hppm_iframe" allowtransparency="true" scrolling="no" overflow="visible" id="z_hppm_iframe" src="https://www.zuora.com/allowtransparencypps/PublicHostedPageLite.do?..." frameborder="0" height="912" width="300">
            </iframe>
        </div>  
    </div>
</div>

我努力了：document.getElementById('z_hppm_iframe').setAttribute("style","width:500px");

我只需要调整 iFrame 元素的宽度，但它在控制台中显示为 null，所以我想我没有正确选择元素。

感谢您提供任何帮助。

iFrame 是动态添加的

$( document ).ready(function() {}

这是在页面的头部。所以我怀疑它在 .setAttribute() 运行时不可用，它位于正文末尾的脚本标记内。我在这方面做的不多（如你所知），所以我只需要弄清楚在添加 iframe 后如何运行这行 js（我猜）。

4

2 回答 2

1

问题是您甚至在浏览器呈现之前尝试使用该元素。

^ 好吧，这仅与 OP 尝试的方法有关。但是，由于 iframe 是动态添加的，并且不需要渲染 DOM 来操作对象，所以他真的不需要将他的<script>标签移动到页面底部。因此，我们不能说这是问题的根源。

至于OP ...

iFrame 是动态添加的...

因为“宽度”在技术上是一个属性和“样式”，另一个......

var iframe = document.create('iframe');
iframe.width = 500;
//or
iframe.style.width = '500px';

希望这会有所帮助

于 2015-10-15T15:35:02.947 回答
1

问题是您甚至在浏览器呈现之前尝试使用该元素。

您应该<script>在结束标签之前放置body标签。

另一种解决方案是使用DOMContentLoaded事件，例如：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('z_hppm_iframe').setAttribute("style", "width:500px");
});

我建议你通过做来改变宽度style.width = '500px';，而不是通过属性做，因为按照你的方式做，style属性将被完全替换。

于 2015-10-06T22:52:21.147 回答