JavaScriptでスタイルシートを追加

HTMLのみが対象
XHTML/HTML両方のページが対象
使い方

CSS切替スクリプトに載せているスクリプトからスタイル追加機能を外したので、こちらでそれを実現する方法を模索してみます。

HTMLのみが対象

text/htmlのページが対象の場合、ごく簡単に document.write() で追加してやるのが一番手っ取り早く確実のような気がします。

document.write(
	'<link rel="alternate stylesheet" title="Style A" href="/style/a.css" type="text/css" media="screen" />',
	'<link rel="alternate stylesheet" title="Style B" href="/style/b.css" type="text/css" media="screen" />',
	'<link rel="alternate stylesheet" title="Style C" href="/style/c.css" type="text/css" media="screen" />'
);

XHTML/HTML両方のページが対象

コンテントネゴシエーションしているとかで text/html なページと application/xhtml+xml なページの両方で動作するようにしたい場合には、以下のようなスクリプトでどうでしょう。

/* 追加スタイルシート設定 ============================== */
var styles = new Array(
/*  title,       href,                   alternate(=1) */
    "Style A",   "/style/a.css",         0,
    "Style B",   "/style/b.css",         1,
    "Style C",   "/style/c.css",         1
);
/* ===================================================== */

/* スタイルシートへリンクするlink要素追加 */
function appendLink() {
	var nhead = document.getElementsByTagName('head')[0];
	for (var i = 0; i < styles.length; i += 3) {
		var nlink   = createHTMLElement('link');
		nlink.type  = 'text/css';
		nlink.media = 'screen';
		nlink.title = styles[i];
		nlink.href  = styles[i + 1];
		nlink.rel   = (styles[i + 2] ? 'alternate ' : '') + 'stylesheet';
		nhead.appendChild(nlink);
	}
}

/* XHTML/HTML要素生成 */
function createHTMLElement(tagname) {
	return ( document.createElementNS )
		? document.createElementNS('http://www.w3.org/1999/xhtml', tagname)
		: document.createElement(tagname);
}

/* 実行 */
document.getElementsByTagName && appendLink();

使い方

適当な名前(例えばaddstyle.jsとか)で保存して、以下のようなscriptタグをhead要素内に入れて下さい。charset属性は保存した文字コードの名前で。