CSSとJavaScriptの動的注入

外部ファイルのCSSとJavaScriptを、ダイナミックにローディングする事ができる。

以下の例は、ボタンが押されたときに、cssファイルやJavaScriptファイルを読み込む例です。

記事へ戻る --- 愚鈍人ホーム
JavaScriptの参考書 ／  Ajaxの参考書 ／  HTMLの参考書 ／  CSSの参考書

 

htmlソース

<!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>