Question

试图找出一种方法来重新调整类中的iframe =＆＃34; col-md-4 col-sm-12＆＃34;。

我尝试调整该类内部的所有内容，但尝试失败。

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%;
}

用js重新调整div里面的iframe大小

1 个答案: