javascript - re-sizing iframe inside div with js -
trying figure out way to re-size iframe inside class="col-md-4 col-sm-12".
i tried resizing inside class attempt failed.
var xx = document.queryselectorall("#homepage > div:nth-child(2) > div.col-md-4.col-sm-12 > div"); (var = 0; < 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=" basic app part 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>
"div.col-md-4.col-sm-12 > div"
this give first div in class.
what can query both divs , iframe can traversed.
var xx = document.queryselectorall("div.col-md-4.col-sm-12 div, div.col-md-4.col-sm-12 iframe"); (var = 0; < xx.length; i++) { xx[i].style.width="450px"; }
if want iframe extend it's parent's width , height set iframe's width , height 100% in css.
iframe{ width: 100%; height: 100%; }
Comments
Post a Comment