ちょっと前に書いたCSSの再読込について備忘録です。
単純に、
<link href >に、IDを振ってリンク先を書き換えればよいだけでした。orz
サンプルはこんな感じ。
Selectオプションを変更すると、それに合わせたCSSを再読み込みします。
<html>
<head>
</body>
</html>
単純に、
<link href >に、IDを振ってリンク先を書き換えればよいだけでした。orz
サンプルはこんな感じ。
Selectオプションを変更すると、それに合わせたCSSを再読み込みします。
<html>
<head>
<link href="/css/default.css" rel="stylesheet" type="text/css" id="baseCss" />
<script type="text/javascript" src="/scripts/jquery/jquery-1.7.1.min.js"></script>
<script>
<!-- CSSの切り替え検出スクリプト -->
function init(){
$("#mode").on("change",function(){
});
}
<!-- CSSファイル変更スクリプト -->
</head>
<body onload="init();">
<!-- CSSの切り替え検出スクリプト -->
function init(){
$("#mode").on("change",function(){
switch($("#mode").val()){
case "blue":
changeSytle("baseCss","/css/blue.css");
changeSytle("baseCss","/css/blue.css");
break;
} case "red":
changeSytle("baseCss","/css/red.css");
break;changeSytle("baseCss","/css/red.css");
default:
changeSytle("baseCss","/css/default.css");
break;changeSytle("baseCss","/css/default.css");
});
}
<!-- CSSファイル変更スクリプト -->
function changeSytle(id,cssfile) {
$("#"+ id).attr("href",cssfile);
}
</script></head>
<body onload="init();">
<select id="mode">
<option value="0" selected="selected">標準システム</option>
<option value="blue">青システム</option>
<option value="red" >赤システム</option>
</select></body>
</html>