HTMLDOMiFrameオブジェクト HTML DOM iframeオブジェクトは、HTMLドキュメントの要素を表します。</P> <p> iframeオブジェクトを作成しましょう-</P> <h2>構文</h2> <p> 以下は構文です-</P> <pre>document.createElement(“IFRAME”);</pre> <h2>プロパティ</h2> <p> 以下はiframeオブジェクトのプロパティです-</P> <table> <thead> <tr> <th style ="text-align：center;">プロパティ <br> </th> <th style ="text-align：center;">説明 <br> </th> </tr> </thead> <tbody> <tr> <td> contentDocument <br> </td> <td>iframeHTML要素によって生成されたドキュメントオブジェクトを返します。 <br> </td> </tr> <tr> <td> contentWindow <br> </td> <td>iframeHTML要素によって生成されたウィンドウオブジェクトを返します。 <br> </td> </tr> <tr><td>高さ <br> </td> <td>iframeHTML要素のheight属性の値を返して変更します。 <br> </td> </tr> <tr><td>名前 <br> </td> <td>iframeHTML要素のname属性の値を返して変更します。 <br> </td> </tr> <tr><td>サンドボックス <br> </td> <td>iframeHTML要素のサンドボックス属性の値を返して変更します。 <br> </td> </tr> <tr><td>シームレス <br> </td> <td> iframeがWebページの一部のようにシームレスに表示されるかどうか、つまり境界線やスクロールバーがないかどうかを返し、変更します。 <br> </td> </tr> <tr> <td> src <br> </td> <td>iframeHTML要素のsrc属性の値を返して変更します。 <br> </td> </tr> <tr> <td> srcdoc <br> </td> <td>iframeHTML要素のsrcdoc属性の値を返して変更します。 <br> </td> </tr> <tr><td>幅 <br> </td> <td>iframeHTML要素のwidth属性の値を返したり変更したりします。 <br> </td> </tr> </tbody> </table> <h2>例</h2> <p> DOMiframeオブジェクトの例を見てみましょう-</P> <pre><!DOCTYPE html> <html> <head> <style> body{ text-align:center; } .btn{ background-color:lightblue; border:none; height:2rem; border-radius:50px; width:60%; margin:1rem auto; } </style> </head> <body> <h1>DOM IFrame Object Example</h1> <button onclick="createIframe()" class="btn">Click me to create an iframe</button> <script> function createIframe() { var x = document.createElement("IFRAME"); x.setAttribute("src", "https://tutorialspoint.com/"); document.body.appendChild(x); } </script> </body> </html></pre> <h2>出力</h2> <p> これにより、次の出力が生成されます-</P> <p> <img loading='lazy' alt='HTMLDOMiFrameオブジェクト ' src="/article/uploadfiles/202203/2022033116104880.jpg" /> </P> <p> 「<strong>クリックしてiframeを作成</strong>」をクリックします 」ボタンでiframeを作成-</P> <p> <img loading='lazy' alt='HTMLDOMiFrameオブジェクト ' src="/article/uploadfiles/202203/2022033116104844.jpg" /> </P> <br> </div> <div class="ad5"> <script language='javascript' src='https://jp.wsxdn.com/css/ad/jp2.js'></script> </div> <div id="turn-page" class="f-between"> <div class="page up f-align"> <i class="prev"></i> <a class='LinkPrevArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064433.html' >HTMLDOM画像オブジェクト </a> </div> <div class="page down f-align"> <a class='LinkNextArticle' href='https://jp.wsxdn.com/pn014i/ay151t/1001064435.html' >HTMLDOMHTMLオブジェクト </a> <i class="next"></i> </div> </div> <section class="bottom-list"> <ol> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001065239.html" class="t-over" title="HTMLDOMHRオブジェクト "> <span>HTMLDOMHRオブジェクト </span> </a> <p class="r-over r-over-3"> HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff; </p> </div> </li> <li class="f-between"> <div> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001065382.html" class="t-over" title="HTMLDOMUlオブジェクト "> <span>HTMLDOMUlオブジェクト </span> </a> <p class="r-over r-over-3"> HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE </p> </div> </li> </ol> </section> </article> <aside class="box1-r box4-r"> <section class="small-nav"> <ul class="f-between"> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd144y/' target="_self">Cプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/qo145i/' target="_self">C ++</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh146b/' target="_self">Redis</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/hf147z/' target="_self">BASHプログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/mk148e/' target="_self">Python</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/lj149d/' target="_self">Java</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay150s/' target="_self">データベース</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ay151t/' target="_self">HTML</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/pn152h/' target="_self">Javascript</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh153b/' target="_self">プログラミング</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/if154a/' target="_self">CSS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig155a/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jg156b/' target="_self">SQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig157b/' target="_self">IOS</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/wu158p/' target="_self">Android</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ge159z/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/jh160b/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ec161w/' target="_self">C＃</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/gd165y/' target="_self">PHP</a></li> <li><a class='childclass' href='https://jp.wsxdn.com/pn014i/ig171a/' target="_self">SQL Server</a></li> </ul> </section> <div class="box1-r-list"> <div> <i></i> <span>HTML</span> </div> <ol> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064433.html" class="r-over r-over-2" title="HTMLDOM画像オブジェクト ">HTMLDOM画像オブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064435.html" class="r-over r-over-2" title="HTMLDOMHTMLオブジェクト ">HTMLDOMHTMLオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064523.html" class="r-over r-over-2" title="HTMLDOMセクションオブジェクト ">HTMLDOMセクションオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064524.html" class="r-over r-over-2" title="HTMLDOMサンプリングオブジェクト ">HTMLDOMサンプリングオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064525.html" class="r-over r-over-2" title="HTMLDOM見積もりオブジェクト ">HTMLDOM見積もりオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064526.html" class="r-over r-over-2" title="HTMLDOM進行状況オブジェクト ">HTMLDOM進行状況オブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064529.html" class="r-over r-over-2" title="HTMLDOMオプションオブジェクト ">HTMLDOMオプションオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064548.html" class="r-over r-over-2" title="HTMLDOMプレオブジェクト ">HTMLDOMプレオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064643.html" class="r-over r-over-2" title="HTMLDOMSオブジェクト ">HTMLDOMSオブジェクト </a> </li> <li class="f-start"> <em></em> <a href="https://jp.wsxdn.com/pn014i/ay151t/1001064644.html" class="r-over r-over-2" title="HTMLDOM添え字オブジェクト ">HTMLDOM添え字オブジェクト </a> </li> </ol> </div> </aside> </section> <footer> <section> <span class="container f-center"> 著作権 © <a href="https://jp.wsxdn.com">https://jp.wsxdn.com</a> 全著作権所有 </span> </section> </footer> </body> </html>
