重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

更新（リロード）の都度読み込むCSSを切り替えたいです。

締切済

  • 質問者：asukared
  • 質問日時：
  • 回答数：3件

CSSについて質問があります。
更新の都度、読み込むCSSを切り替えたいのですが、
Javascriptを使うなどサンプルをお持ちの方がいらっしゃったら
ご教示下さい。

メタフェイズのHPのような感じです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： babu_baboo
  • 回答日時：

＞初期に読み込まれるCSSを指定することは出来ますか？



てへぇ！？いみがわかりません。^^;

じぶんにひつようのないものしか、きょうみをしめさないの？
ものごとにはじゅんじょがあるよと、おそわらなかった？
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： babu_baboo
  • 回答日時：

こういうかきかたは、きけんなの？


<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
var styleSheet = [ 'style0.css', 'style1.css', 'style2.css' ];
var style = styleSheet[ Math.random() * styleSheet.length |0 ];
document.write( '<link rel="stylesheet" type="text/css" href="'+ style+ '">' );
</script>

この回答への補足

ありがとうございます。
こちらで、OKですが、
初期に読み込まれるCSSを指定することは出来ますか？

補足日時：2010/03/24 16:51
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： yyr446
  • 回答日時：

複数CSSファイルを準備して、ランダムに切り替えるという要望として、


ランダムに切り替える部部分は作りこんで無いですが、以前にやった事が
あるサンプルです。
（このサンプルは本来適用されているCSSルールをjavascriptでいじくる例です。）
CSSは後から追加したルールが通常優先され、追加されてないルールは
残ってます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ChangeCss</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link rel="stylesheet" type="text/css" href="test1.css">
<script type="text/javascript" charset="utf-8">
<!--
window.onload = function () {
//外部CSSへのLINK TAG生成
var new_css_link=document.createElement("link");
new_css_link.setAttribute("rel","stylesheet");
new_css_link.setAttribute("type","text/css");
new_css_link.setAttribute("href","test2.css");
document.getElementsByTagName("head")[0].appendChild(new_css_link);
//もしかして、これより下まったく不要かも
//適用されているスタイルシートの取得
var pre_css = document.styleSheets[1];
var pre_rules = pre_css.rules?pre_css.rules:pre_css.cssRules;
var new_css = document.styleSheets[2];
var new_rules = new_css.rules?new_css.rules:new_css.cssRules;
/* 2番目のCSSを全て無効にする場合
pre_css.disabled = true;
*/
/* 2番目のCSSのルールを全部削除する場合
for (var i=0;i<pre_rules.length;i++){
pre_css.deleteRule(i);
}
*/
// 新しく作った3番目のCSSのルールで2番目のCSSルールを上書きする
for (var i=0;i<new_rules.length;i++){
selector = new_rules[i].selectorText;
selector = selector.toLowerCase();
rule = "";
for (property in new_rules[i].style) {
attribute = new_rules[i].style[property.camelize()];
if (attribute){
rule += property + ":" + attribute +";";
if(window.ActiveXObject){
pre_css.addRule(selector , " { " + rule + " }",pre_rules.length+1);
}else{
pre_css.insertRule(selector + " { " + rule + " }",pre_rules.length);
}
}
}
}
}
//ルールのプロパティ名のカメライズ処理
String.prototype.camelize = function( ) {
return this.replace( /-([a-z])/g,
function( $0, $1 ) { return $1.toUpperCase( ) } );
}
String.prototype.deCamelize = function( ) {
return this.replace( /[A-Z]/g,
function( $0 ) { return "-" + $0.toLowerCase( ) } );
}
// -->
</script>
</head>
<body>
ホゲホゲ
</body>
</html>
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報