感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

JavaScriptでフォントとかを操作する。

<スポンサーリンク>

JavaScriptを利用して動的に変化するページを作成する手法は、以前はDHTML(ダイナミックHTML)と呼ばれていた。
いまはAjaxと呼ばれている。

JavaScriptで動的にスタイルを変化させるサンプル

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
<title> 動的にスタイルプロパティを変更する</title>
<script type="text/javascript">
window.onload = function() {
	//ページが読み込まれて2秒後にchangeCSSを実行
	setTimeout(changeCSS,2000);
}

//Div要素を取得して、スタイルを変化させる
function changeCSS() {
	var div = document.getElementById("div");
	div.style.backgroundColor="#00f";
	div.style.width="500px";
	div.style.color="#fff";
	div.style.height="200px";
	div.style.paddingLeft="50px";
	div.style.paddingTop="50px";
	div.style.fontFamily="Verdana";
	div.style.fontSize="2em";
	div.style.border="3px dashed #ff0";
	div.style.position="absolute";
	div.style.left="200px";
	div.style.top="100px";
	div.style.textDecoration="underline";
}

</script>
</head>
<body>
	<div id="div">
		DIV要素のスタイルを変更します
	</div>
</body>
</html>


・クリックしたらフォントのサイズが変わるサンプル

<?xml version="1.0" encoding="Windowd-31J"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
<title> テキストブロックを変更</title>
<script type="text/javascript">

window.onload = function() {
	document.getElementById('smaller').onclick=makeLess;
	document.getElementById('larger').onclick=makeMore;
}

function makeMore() {
	var div = document.getElementById("div1");
	div.style.fontSize="larger";
	div.style.letterSpacing="10px";
	div.style.textAlign="justify";
	div.style.textTranform="uppercase";
	div.style.fontSize="xx-large";
	div.style.fontWeight="900";
	div.style.lineHeight="40px";
}

function makeLess() {
	var div = document.getElementById("div1");
	div.style.fontSize="smaller";
	div.style.letterSpacing="normal";
	div.style.textAlign="left";
	div.style.textTransform="none";
	div.style.fontSize="medium";
	div.style.fontWeight="normal";
	div.style.lineHeight="normal";
}
</script>
</head>
<body>
	<p style="font-size": larger; font-weight: 3000;">
		<span id="smaller">
			縮小!!
		</span>
		&nbsp;&nbsp;
		<span id="larger">
			拡大!
		</span>
	</p>
	<div id="div1">
	<p>
		テキスト1
	</p>
	<p>
		テキスト2
	</p>
	</div>

</body>
</html>

テキスト関連の属性
属性意味
color テキストの色を設定する
text-decoration点滅させたりする取り消し線を引いたりする
text-transform文字の変換
directionテキスト文字を動かす。右から左に動かしたりする
text-align右揃えとか左揃えとか
word-spacing文字の幅など
<参考>
初めてのJavaScript 第2版

初めてのJavaScript 第2版