Javascript を利用してスタイルを変更する(2)

スタイルシートを操作するもう 1 つの方法を提案します．「詞織: 自作スタイルシートの適用」や「埼玉住人: 引用をわかりやすくしよう」で，link 要素や style 要素をなんとか埋め込んで，スタイルシートを適用しようという試みがされています．すばらしいテクニック．

でも本来おくべきところに link 要素や style 要素をおくわけではないので，XHTML の文法違反になってしまいます．この点はなんとも残念です．

ぼくも先人のマネをしてみたのですが，link 要素や style 要素ではなくて，script 要素を埋め込みました．そして外部ファイルにした javascript を読み込んでスタイルシートを操作します．こうして XHTML の文法違反になるのを避けてみました．

script 要素を埋め込んだのは，マイリンクの中です．なるべく下側になるのが良いでしょう．

<script type="text/javascript" src="/handshaking/style.js"></script>

/handshaking/ の部分は，ご自身の Weblog のディレクトリ名，つまりファイルをアップロードする場所に変更してください．

javascript のファイルは，ダウンロードして改変してみてください．

Download file [javascript のファイル]

この例では，見出しのスタイルと本文の字の大きさ，長文引用時の枠線などをのスタイルシートを操作しています．

下にソースコードを貼っておきます．

公開後に間違いを発見したので修正しました．

// ココログ用 javascript によるスタイルシート操作
// これは，正しい XHTML を保つために，スタイルシートの操作を javascript で行う試みです．
// これは自由に使用し，改変して，配布してかまいませんが，正しい XHTML を心がけましょう．
// マイリストになにかの項目を足すときに，そのメモの部分に以下のタグを書きくわえます．
//	<script type="text/javascript" src="style.js"></script>
// そのマイリストの項目よりも先に出現するものしか，操作できません．
// おのひろき 
// http://onohiroki.cocolog-nifty.com/foaf.rdf
//
// ココログ タイトルとサブタイトル
document.getElementsByTagName("h1")[0].style.fontSize = '54px';
if(document.getElementsByTagName("h2").length){
	document.getElementsByTagName("h2")[0].style.fontSize = '64px';
	document.getElementsByTagName("h2")[0].style.color= '#768BA0';
	document.getElementsByTagName("h2")[0].style.paddingTop = "30px";
}
// 各パートの横幅
document.getElementById("container").style.width="90%";
document.getElementById("right").style.width="23%";
document.getElementById("center").style.width="77%";
if(window.innerWidth < 500){
	document.getElementsByTagName("h1")[0].style.fontSize = '2em';
	document.getElementsByTagName("h2")[0].style.fontSize = '2em';
	document.getElementById("right").style.width="100%";
	document.getElementById("center").style.width="100%";
}
if(window.innerWidth > 1600){
	document.getElementById("right").style.width="12%";
	document.getElementById("center").style.width="88%";
}
// 記事の見出し
var i=0;
do {
	document.getElementsByTagName("h3")[i].style.fontSize = '2em';
	document.getElementsByTagName("h3")[i].style.color = '#FFFFFF';
	document.getElementsByTagName("h3")[i].style.backgroundColor = '#768BA0';
	document.getElementsByTagName("h3")[i].style.padding = '0.3em';
	document.getElementsByTagName("h3")[i].style.borderStyle = 'solid';
	document.getElementsByTagName("h3")[i].style.borderWidth = '2px';
	document.getElementsByTagName("h3")[i].style.borderColor = '#667B90';
	i+=1;
} while (i < document.getElementsByTagName("h3").length);
// 本文 p 要素
var i=0;
do {
	document.getElementsByTagName("p")[i].style.fontSize = 'medium';
	i+=1;
} while (i < document.getElementsByTagName("p").length);
// 長文引用 blockquote 要素
if(document.getElementsByTagName("blockquote").length){
	var i=0;
	do {
		document.getElementsByTagName("blockquote")[i].style.fontSize = 'medium';
		document.getElementsByTagName("blockquote")[i].style.padding = '0.3em';
		document.getElementsByTagName("blockquote")[i].style.borderStyle = 'solid';
		document.getElementsByTagName("blockquote")[i].style.borderWidth = '1px';
		document.getElementsByTagName("blockquote")[i].style.borderColor = '#667B90';
		i+=1;
	} while (i < document.getElementsByTagName("blockquote").length);
}
// 整形済みテキスト pre 要素
if(document.getElementsByTagName("pre").length){
	var i=0;
	do {
		document.getElementsByTagName("pre")[i].style.color = 'green';
		document.getElementsByTagName("pre")[i].style.padding = '0.3em';
		document.getElementsByTagName("pre")[i].style.borderStyle = 'solid';
		document.getElementsByTagName("pre")[i].style.borderWidth = '1px';
		document.getElementsByTagName("pre")[i].style.borderColor = '#667B90';
		i+=1;
	} while (i < document.getElementsByTagName("pre").length);
}