2

したがって、2つのcssファイル（light.cssとdark.css）があります。<link>これら2つのcssファイル間で要素の「href」属性を切り替えるボタンがページにあります。

これで、<div>デフォルトでlight.cssから背景スタイルを取得するができました。'href'属性を'dark.css'に変更すると、divはdark.cssで提供される新しいスタイリングコードを引き受けません...

なぜ何かアイデアはありますか？

==編集：コードスニペットを追加しました...

変更するJS <link>：

var nightMode = false;
var theme = document.querySelector('#theme');
// Where <link id="theme" style="text/css" rel="stylesheet" href="light.css">

function toggleNight()
{
    if (!nightMode)
    {
        setTimeout("theme.setAttribute('href', '_css/dark.css')", 400);
        nightMode = true;
    }
    else
    {
        setTimeout("theme.setAttribute('href', '_css/light.css')", 400);
        nightMode = false;  
    }
}

これに加えて、CSSファイルは次のようになります。

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}
4

2 に答える 2

1

このWebサイトからソースを少し変更しました：Javascriptを使用した外部CSSファイルの変更。

私はこれがあなたがこれをすることを期待するコードだと思います：

<!DOCTYPE html>
<html>
  <head>
    <title>Changing CSS extern file using only JavaScript</title>
    <link id="changeCSS" rel="stylesheet" type="text/css" href="positive.css"/>
    <script type="text/javascript">
      function changeCSS() {

        var oldlink = document.getElementById("changeCSS");
        var cssFile;

        if(oldlink.getAttribute('href') === 'positive.css') {
          cssFile = 'negative.css';
        }
        else {
          cssFile = 'positive.css';
        }

        var newlink = document.createElement("link");
        newlink.setAttribute("id", "changeCSS");
        newlink.setAttribute("rel", "stylesheet");
        newlink.setAttribute("type", "text/css");
        newlink.setAttribute("href", cssFile);

        document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
      }
    </script>
  </head>
  <body>
    <button onclick="changeCSS();">change</button>
    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </body>
</html>

これがあなたが探していたものであることを願っています。コードがわからない場合は、質問してください。

于 2012-08-10T08:49:50.573 に答える
0

jQuery / javascriptコードが明らかに間違っている場合は、次のようにしてみてください。

$('button').click(function(){
  if ($('link[href*="temp1"]').length > 0)
      $("link").attr('href',"http://ajthomas.co.uk/temp2.css");
  else
      $("link").attr('href',"http://ajthomas.co.uk/temp1.css");
});

そしてここにフィドルがあります-http ://jsfiddle.net/Xtjv2/

アップデート

それを除外するために、CSSを次の場所から変更してみてください。

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}

に：

// light.css
div{background-color:#ddd;}

// dark.css
div{background-color:#333;}
于 2012-08-10T08:27:54.213 に答える