外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。
以下の例は、ボタンが押されたときに、cssファイルやJavaScriptファイルを読み込む例です。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSSとJavaScriptの動的注入</title> </head> <body> <h1>CSSとJavaScriptの動的注入</h1> <p>外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。</p> <p>以下の例は、ボタンが押されたときに、cssファイルやJavaScriptファイルを読み込む例です。</p> <button onclick="addStyleSheet('/gudon/rd/ajax/html/inject_CSS_JS.css');">cssの注入</button> <button onclick="addScript('/gudon/rd/ajax/html/inject_CSS_JS.js');">JavaScriptの注入</button> <button onclick="location.reload(false);">リセット</button> <script type="text/javascript"> // cssの注入 function addStyleSheet(href){ var link = document.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", href); var head = document.getElementsByTagName("head")[0]; head.appendChild(link); } // JavaScriptの注入 function addScript(src){ var script = document.createElement('script'); script.setAttribute("type", "text/javascript"); script.setAttribute("src", src); var head = document.getElementsByTagName("head")[0]; head.appendChild(script); } </script> </body> </html>