-8

head セクションに次の 2 つの CSS ファイルがあります。

<link href="css1.css" rel="stylesheet" type="text/css" /> 
<link id="css2" href="css2.css" rel="stylesheet" type="text/css" />

そしてこのhref：

<a href="#" onclick="document.getElementById('css2').href='css2.css'">Change</a>

ページにはcss2（背景色が緑に設定されています）が表示されていますが、css1（赤）を表示したいので、css2リンクをクリックするとcss2に変更されます。

4

6 に答える 6

2

disabledプロパティを介して2番目のスタイルシートを無効/有効にすることができます:

document.getElementById('css2').sheet.disabled = true;

または要素全体<link>:

document.getElementById('css2').disabled = true;

そうすれば、宣言は最初のものを上書きしません。リンクの を変更しようhrefとしてもうまくいきますが、そのためには と の間で切り替わるタグが1 つだけ 必要です。<link>"css1.css""css2.css"

于 2013-03-06T18:40:37.483 に答える
0

サイトのデフォルトのスタイルシートを作成し、特定のユーザー用に他のスタイルシートを作成します。次に、デフォルトのスタイルをjavascriptsまたはphpでオーバーライドします

于 2013-03-06T16:43:35.343 に答える
0

ページの読み込み時に両方のファイルが読み込まれているため、機能しません。もちろん、両方のファイルが存在するため、最初から 2 番目のファイルの色になります。

ページは 1 つのファイルで開始する必要があります。

他のオプションは、両方のファイルをロードすることですが、ルールは本体のクラスに基づいています。

file1.css

body { background-color: yellow; }
h1 { color: red }

file2.css

body.alt {background-color: green; }
body.alt h1 { color : blue; }

そして、JavaScript を使用してクラスを追加します。

document.body.className = document.body.className==="alt" ? "" : "alt";
于 2013-03-06T18:38:00.167 に答える
0

「ユーザーがリンクの 1 つをクリックしたときに 2 つのスタイルシートを切り替えるにはどうすればよいですか」と尋ねている場合は、次のアプローチをお勧めします。

  • デフォルトのスタイルシートはそのままにしておきます。
  • 2 番目のスタイルシートのすべてのスタイル宣言の前に、独自のクラスを付けます。alternative-css
  • ユーザーが「代替」リンクをクリックすると、高レベルの要素 ( <html>、<body>またはラッパーなど) にクラスが追加されます。<div>

例えば：

HTML:

<body>
    <a href="#" id="main">Main Style</a>
    <a href="#" id="alt">Alternative Style</a>
    <div id="wrapper">
        <p>Some text</p>
    </div>
</body>

スタイルシート:

#wrapper {
    background: #000;
}
p {
    color: #fff;
}

代替スタイルシート:

.alternative-css #wrapper {
    background: #fff;
}
.alternative-css p {
    color: #000;
}

JS:

$('#main').click(function(){$('body').removeClass('alternative-css')});
$('#alt').click(function(){$('body').addClass('alternative-css')});

PS: この質問に jQuery のタグを付けていないことは知っていますが、これは概念としての意味があり、バニラ JS でクリック ハンドラーを作成するのはそれほど難しくありません。

于 2013-03-06T16:47:06.100 に答える
0

JavaScript (またはこの場合は jQuery) を使用して、いつでも別の外部 CSS ファイルを動的に追加できます。

$('head').append('<link rel="stylesheet" href="/alternative.css" type="text/css" />');
于 2013-03-06T16:42:10.833 に答える
0

私が見つけた最も簡単な方法は、<body>タグにクラスを設定し、1 つの CSS ファイルを使用することですが、CSS 定義の 2 つのセットを定義し、各セットにプレフィックスとしてクラス名を付けます。

デフォルトのクラス (例: <body class="bodyClass1">) を設定し、外観を変更したい場合は、JavaScript を使用してクラスを別のクラスに更新するだけです。

これの利点は、すべてのクラスがページの読み込み時に読み込まれ、共通のスタイルを「クラス固有の」定義の外でコーディングできることです。

例：

body {...}
a {...}
div {font-weight: bold;}

.bodyClass1 div {font-size: 10px;}

.bodyClass2 div {font-size: 12px;}
于 2013-03-06T16:52:48.760 に答える