如何在iOS5 Safari上获得备用样式表

How do I get alternate style sheets to work on iOS5 Safari?

本文关键字：备用 样式 iOS5 Safari      更新时间：2023-09-26

我一直在为iPad开发HTML5应用程序。该应用程序的一部分包括使用替代样式表。这在iOS 4 Safari上运行良好，在我桌面上的Safari上也运行良好。然而，我刚刚将我们的一台iPad升级到iOS 5测试版，它已经不起作用了。有什么想法吗？

这是我的代码。

function (options) {
    var i, a, main;
    for (i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
        if (a.rel.indexOf("style") != -1
        && a.title) {
            a.disabled = true;
            if (a.title == options.title) {
                a.disabled = false;
                console.log('The theme should be changing to : ' + a.title);                    
            }
        }

在搜索SO和web后，我对任何解决方案都不满意。因此，我想出了一个新的解决方案，可以在chrome、ff、ie和safari中工作，也可以在旧ipad上工作：

第一套样式：

<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">

注意属性"datatitle"这是一个用户定义的属性。

然后使用此功能更改样式表，(注意，我在应用程序范围中设置了它，您可以将其作为标准功能：

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"); 
      a.setAttribute("title", a.getAttribute('data-title'));
      a.disabled = true
  }
  o.setAttribute("title", undefined); 
  o.setAttribute("rel", "stylesheet"); 
  o.disabled = false
  //app.cookieCreate("style", title, 365);
}
相关文章：