用js重新調整div中的iframe大小

Question

試圖找出一種在class =“ col-md-4 col-sm-12”內調整iframe大小的方法。

我嘗試調整該類中所有對象的大小，但嘗試失敗。

var xx = document.querySelectorAll("#homePage > div:nth-child(2) > div.col-md-4.col-sm-12 > div");

for (var i = 0; i < xx.length; i++) {
    xx[i].style.width="450px";
}

HTML：

<div class="col-md-4 col-sm-12">
                <div class="ms-webpart-zone ms-fullWidth">
        <div id="MSOZoneCell_WebPartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullWidth ">
            <div class="ms-webpart-chrome ms-webpart-chrome-vertical " style="width:320px">
                <div class="ms-webpart-chrome-title" id="WebPartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c_ChromeTitle" style="width:320px;">
                        <span title=" This is a basic app part with custom properties." id="WebPartTitlectl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="js-webpart-titleCell"><h2 class="ms-webpart-titleText" style="overflow:hidden;text-overflow:ellipsis;text-align:justify;"><a accesskey="W" href="###"><nobr><span>/span><span id="WebPartCaptionctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c"></span></nobr></a></h2></span>
                    </div><div webpartid="ee6207c9-12ab-4c71-aa01-3d615b36437c" haspers="false" id="WebPartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="ms-WPBody ms-WPBorder noindex ms-wpContentDivSpace " allowdelete="false" allowexport="false" style="width:320px;height:210px;"><div id="ctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" style="width: 450px;">

    <iframe src="###" id="g_49a1549f_f388_4175_836c_c54ba7e29505" frameborder="0" width="320px" height="210px"></iframe>
    </div></div>
                </div>
            </div>
        </div>
                </div>

Answer 1

"div.col-md-4.col-sm-12 > div"

這只會給您班上第一個div。

您可以做的是查詢div和iframe，然后可以遍歷它們。

var xx = document.querySelectorAll("div.col-md-4.col-sm-12 div, div.col-md-4.col-sm-12 iframe");
for (var i = 0; i < xx.length; i++) {
    xx[i].style.width="450px";
}

如果您只是想將iframe擴展到其父對象的寬度和高度，則只需在CSS中將iframe的寬度和高度設置為100％。

iframe{
    width: 100%;
    height: 100%;
}