Safari 5.1でCSSスタイルのスイッチャーが無効にされている

Question

私のウェブページにこのjQueryベースのCSSスタイルスイッチャーがあります。ブラウザをSafari 5.1にアップデートすると、このスクリプトは機能しなくなりました。私は周りを見て、thisリンゴのディスカッションページを見て、原因が代替スタイルシートがSafari 5.1で無効になっていた。誰も私がこの問題を回避するのを助けることができますか？私はプログラマーではないので、これを理解することはできません。

著者のページhttp://www.kelvinluck.com/assets/jquery/styleswitch/toggle.html

(function($) 
{ 
    $(document).ready(function() { 
     $('.styleswitch').click(function() 
     { 
      switchStylestyle(this.getAttribute("rel")); 
      return false; 
     }); 
     var c = readCookie('style'); 
     if (c) switchStylestyle(c); 
    }); 

    function switchStylestyle(styleName) 
    { 
     $('link[rel*=style][title]').each(function(i) 
     { 
      this.disabled = true; 
      if (this.getAttribute('title') == styleName) this.disabled = false; 
     }); 
     createCookie('style', styleName, 365); 
    } 
})(jQuery); 

Answer 1

は、私はちょうど同じ問題に遭遇したのSafari 5

http://electrokami.com/coding/jquery-style-sheet-switcher-with-preview/

Answer 2

で動作するjQueryのスクリプトへのリンクを発見しました。私の推測ではSafariは<リンク>タグをスタイルシートに無効にするのが好きではなかったので、コードを少し変更しました。

は、今では一つだけ<リンク>タグを使用すると、クリックした何のrel属性に基づいて、href属性に置き換えられます：

(function($) 
{ 
    $(document).ready(function() { 
    $('.styleswitch').click(function() { 
     switchStylestyle(this.getAttribute("rel")); 
     return false; 
    }); 
    var c = readCookie('style'); 
    if (c) switchStylestyle(c); 
    }); 

    function switchStylestyle(styleName) 
    { 
    linktag = $('link[rel*=style][title=theme]'); 
    linktag.attr('href', styleName); 
    createCookie('style', styleName, 365); 
    } 
})(jQuery); 

を今、それを使用するには、あなたは<リンク>を配置する必要がありますあなたのデフォルトのテーマを指すタイトル「テーマ」とタグ：

<link rel="stylesheet" type="text/css" title="theme" href="light.css"/> 

あなたが「styleswitch」クラスを持っているリンクをクリックすると、それは「テーマ」<リンクを設定します

<a href="#" rel="dark.css" class="styleswitch">Switch to dark stylesheet</a> 

Answer 3

SO検索やウェブの後、私は解決策のいずれかに満足していませんでした：さんhref属性がクリックされた< >タグの 『REL』属性は何でもするように。だから私は、古いiPadのクロム、FF、IEとSafariとサファリで働いている新しいソリューションを思い付いた：

まずセットスタイル：

<link rel="stylesheet"    href="./codebase/touchui.css"  data-title="default"  type="text/css" media="screen" charset="utf-8"> 
<link rel="alternate stylesheet" href="./codebase/ios.css"   data-title="ios"    type="text/css" media="screen" charset="utf-8"> 
<link rel="alternate stylesheet" href="./codebase/jq.css"   data-title="jq"     type="text/css" media="screen" charset="utf-8"> 
<link rel="alternate stylesheet" href="./codebase/sky.css"   data-title="sky"    type="text/css" media="screen" charset="utf-8"> 
<link rel="alternate stylesheet" href="./codebase/green.css"   data-title="green"   type="text/css" media="screen" charset="utf-8"> 

お知らせ属性「データタイトル」このユーザー定義の属性です。

次に、あなたがそれ標準機能させることができ、私はそれがアプリの範囲に設定されていることに注意してください（、スタイルシートを変更するには、この機能を使用します！。

素敵

app = {} 

app.styleSet=function(title) { 
    var i, a 
    var o; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) 
    if (a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute('data-title')) { 
     if (a.getAttribute('data-title') == title) 
     o = a 

     a.setAttribute("rel", "alternate stylesheet");   // the order here is important 
     a.disabled = true 
     a.setAttribute("title", a.getAttribute('data-title')); 
    } 

    o.setAttribute("title", undefined);       // the order here is important 
    o.disabled = false 
    o.setAttribute("rel", "stylesheet"); 
    //app.cookieCreate("style", title, 365); 
}