JS版Webサイトスタイル切り替え例 code_javascriptスキル

スタイルシート接続、3つのスタイルを設定し、変更したい画像の背景をスタイルシートに書き込みます。

コードをコピー コードは次のとおりです:

最初のものはデフォルトのスタイルシートです。
スクリプト -- 作成者:dynamicdrive.com
使用規約: http://www.dynamicdrive.com/notice.htm

コードをコピー コードは次のとおりです。

//スタイル シート スイッチャー バージョン 1.0、2005 年 11 月 9 日
//作成者: Dynamic Drive: http://www.dynamicdrive. com
//使用条件: http://www.dynamicdrive.com/notice.htm
function getCookie(Name) {
var re=new RegExp(Name "=[^;] ", " i") ; //ターゲットの名前と値のペアを検索する RE を構築します
if (document.cookie.match(re)) //Cookie が見つかった場合
return document.cookie.match(re)[0] .split( "=")[1] //その値を返します
return null
}
function setCookie(name, value, days) {
varexpireDate = new Date()
//「expstring」を将来の日付または過去の日付に設定し、それぞれ Cookie を設定または削除します
var expstring=(typeof days!="unknown")?expireDate.setDate(expireDate.getDate() parseInt(days)) :expiredDate.setDate(expireDate.getDate()-5)
document.cookie = name "=" value ";expires="expiredDate.toGMTString() "; path=/"; deleteCookie(name ){
setCookie(name, "moot")
}
function setStylesheet(title) {
var i, cacheobj
for(i=0; (cacheobj=document. getElementsByTagName(" link")[i]); i ) {
if(cacheobj.getAttribute("rel").indexOf("style") != -1 &&cacheobj.getAttribute("title")) {
cacheobj .disabled = true
if(cacheobj.getAttribute("title") == title)
cacheobj.disabled = false //選択したスタイルシートを有効化
}
}
}
functionchooseStyle(styletitle, days){
if (document.getElementById){
setStylesheet(styletitle)
setCookie("mysheet", styletitle, days)
}
}
var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //ユーザーが選択したスタイルシートが保存されている場合はロードします
setStylesheet(selectedtitle)


メソッドの呼び出し

コードのコピー コードは次のとおりです:

<タイトル="デフォルト スタイル" href ="javascript:chooseStyle('default',5)">デフォルト スタイル

オレンジ スタイル
ブルー スタイル


注: ここではタイトルの内容をスタイルシートの名前に変更します。