javascript - 使用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%;
}