更改 2 个 div 内的内部 iframe 的宽度答案

【问题标题】：change width of an inner Iframe that is inside 2 divs更改 2 个 div 内的内部 iframe 的宽度
【发布时间】：2016-02-14 06:36:56
【问题描述】：

我需要通过 javascript 从这样的结构中更改宽度

    <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px">
         <div style ="width:800px;">
               <iframe id="notReliable_ChangeEveryTimeOnLoad" frambeborder="no" style="width:800px"> 
<html>....</html>
        </iframe>
        </div>
    </div>

如何为内部 div 和 iframe 设置 1366px 的宽度？顺便说一句，每次从主程序加载时 iframe Id 都会不断变化，所以我必须使用 getelementbyid 以外的其他方法来运行......

【问题讨论】：

标签： javascript jquery html iframe width

【解决方案1】：

使用 JavaScript，你应该做这样的事情：

HTML：

<div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px">
     <!-- Use an ID on each component you want to change through JS -->
     <div id="innerDiv" style ="width:800px;">
         <iframe id="notReliable_ChangeEveryTimeOnLoad" frambeborder="no" style="width:800px">
         <html>....</html>
    </iframe>
    </div>
</div>

JavaScript：

document.getElementById('innerDiv').style.width = "1366px";
document.getElementById('notReliable_ChangeEveryTimeOnLoad').style.width = "1366px";

【讨论】：

【解决方案2】：

在 Jquery 中：

$(".HTMLGroupBox").css("width","1366px"); // targets the first div with class HTMLGroupBox and sets its width.

$(".HTMLGroupBox").find('div').css("width","1366px"); // targets the div element inside the first div with class HTMLGroupBox and sets its width.

$(".HTMLGroupBox").find('div').find('iframe').css("width","1366px"); // targets the iframe element inside the div which is inside the first div with class HTMLGroupBox and sets its width.

例如：http://jsfiddle.net/ayL6o6v3/

在 Javascript 中：

document.getElementByClass("HTMLGroupBox").style.width = "1366px";
document.getElementByClass("HTMLGroupBox").getElementsByTagName('input').style.width = "1366px";
document.getElementByClass("HTMLGroupBox").getElementsByTagName('input').getElementsByTagName('iframe').style.width = "1366px";

例如：http://jsfiddle.net/ayL6o6v3/1/

【讨论】：