2

クリック時にドキュメント全体の CSS ファイルを変更する方法を知っている人はいますか? 私は周りを検索しましたが、ドキュメント全体ではなく、クラス/ID の CSS の設定に関するいくつかの結果しか見つかりませんでした。私の Web サイトには明暗の 2 つのテーマがあり、2 つのリンクから「light.css」または「dark.css」をロードしたいと考えています。

ありがとう。

4

4 に答える 4

1

ええ、テーマを使用して行うことができます。ただし、CSS の変更は<body>タグに限定されます。

$("a.theme").click(function(){
    $("body").addClass("dark");
});

コーディングを容易にするためにjQueryライブラリを使用しました。また、CSS を切り替えることはお勧めできません。クラスを変更することはできます。

デモ

jsBinで動作するデモを確認できます。

詳細については、この回答を確認してください: Selecting a web page look and feel without reloading, with one CSS .

于 2013-03-25T01:36:05.250 に答える
1

スタイルを制御する link タグの src を変更する必要があります。たとえば、head タグに次のように記述している可能性があります。

<link rel="stylesheet" href="light.css">

何かをクリックしたときに link タグの href 属性を「dark.css」に変更する必要があります。次のようにできます。

document.getElementById('id-of-element').addEventListener('click',function(){
    document.getElementsByTagName('link')[0].setAttribute('href',isDark?'light.css':'dark.css');
    isDark=isDark?false:true;
}

重要: このコードの前に、ページが最初に暗いか明るいかによって、isDark を false または true に設定する必要があります。id-of-elementまた、ページの状態を切り替えるためにクリックする必要がある要素の IDに変更する必要があります。

シンプルでjqueryを使用しないため、これは他の回答よりも優れていると思います。

編集: 以前の href 属性ではなく、誤って src 属性を持っていました。私は今、それを正しいものに更新しました。

于 2013-03-25T02:49:06.567 に答える
0

すぐに思いつく方法は2つあります。

1) ページのヘッドにスタイル タグを追加し、スタイル タグが一意の ID を持つようにします。その後、その要素の innerHTML を設定できます。(やや乱雑)

2) ページのヘッドにリンク タグを追加し、一意の ID を持つようにします。type='text/css' および rel='stylesheet' 属性を設定します。このリンク要素の src を適切な css ファイルに設定します。

各タイプの例を次に示します。theme3() および theme4() 関数の css ファイルを指定するだけです。

例：

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    var style = newEl('style');
    style.setAttribute('id', 'dynCss');
    document.head.appendChild(style);

    var style2 = newEl('link');
    style2.setAttribute('type', 'text/css');
    style2.setAttribute('rel', 'stylesheet');
    style2.setAttribute('id', 'dynCss2');
    document.head.appendChild(style2);
}

function theme1()
{
    var style = byId('dynCss');
    style.innerHTML = "h1{color: red;}";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', '');
}

function theme2()
{
    var style = byId('dynCss');
    style.innerHTML = "h1{color: blue;}";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', '');
}

function theme3()
{
    var style = byId('dynCss');
    style.innerHTML = "";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', 'style3.css');
}

function theme4()
{
    var style = byId('dynCss');
    style.innerHTML = "";
    var style2 = byId('dynCss2');
    style2.setAttribute('href', 'style4.css');
}
</script>
<style>
</style>
</head>
<body>
    <h1>This is the heading</h1>
    <input type='button' onclick='theme1();' value='Theme 1'/>
    <input type='button' onclick='theme2();' value='Theme 2'/>

    <input type='button' onclick='theme3();' value='Theme 3'/>
    <input type='button' onclick='theme4();' value='Theme 4'/>
</body>
</html>
于 2013-03-25T12:51:13.783 に答える
0

次のようなことを試してください：

<a href="#" id="light">Light</a>
<a href="#" id="dark">Dark</a>
<script type="text/javascript" charset="utf-8">
    $('a#light, a#dark').click(function(){
        $('style').remove();
        $.ajax({
            url:'http://www.example.com/' + $this.attr('id') + '.css',
            success:function(data){
                $('<style></style>').appendTo('head').html(data);
            }
        })
    })
</script>

もちろん、最初に jQuery をロードする必要があります。

于 2013-03-25T02:00:12.823 に答える