JQuery 选择和交换样式表 href 值答案

【问题标题】：JQuery to Select and Swap Stylesheet href valuesJQuery 选择和交换样式表 href 值
【发布时间】：2011-11-14 02:18:42
【问题描述】：

我想知道如何在下面的调整大小功能中选择下面的两个样式表链接。我需要根据方向值修改两个链接的 href 值，但我不确定如何在下面的条件语句中选择和填充它们，有什么想法吗？

 <head>
                <link rel="stylesheet" href="css/style.css" type='text/css' media='all' />
                <link rel="stylesheet" href="css/iphone.css" type='text/css' media='all' />
                <script type="text/javascript">
                       $ = jQuery
                       $(document).ready(function() {
                             $(window).resize(function() {
                                     var orientation = window.orientation;

                              if(orientation == 90 || orientation == -90) { 
                                    //populate href of stylesheet link here
                                   } else {
                                       //populate href of stylesheet link here
                                   }
                             });
                          });
                </script>
   </head>

【问题讨论】：

我认为根据方向更改html 元素上的类会更好。然后编写您的样式以支持不同的方向。

标签： javascript jquery

【解决方案1】：

只需提供您的样式表和 id 并像这样进行更改：

$("#id").attr("href", "/somecss.css");

【讨论】：

【解决方案2】：

如果您使用 CSS3，则可以使用 css3 媒体查询根据用户浏览器的方向更改样式。

<link rel="stylesheet" media="all and (orientation:landscape)"href="landscape.css">

仅当用户浏览器的方向是横向时，才会包含此样式表。

请记住，这只适用于与 CSS3 兼容的浏览器。

【讨论】：

【解决方案3】：

看看这个链接： http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/

另一个问题： CSS3: Detecting device orientation for iPhone

最好将两个 css 放在一个文件中，以后不要更改 css。 Css 首先被加载。只有这样你的javascript才会被执行。因此，首先将加载您的默认 css。然后您将更改 href 标记（使用其他答案），然后将加载下一个文件。额外调用服务器。最好在一个文件中同时定义（风景和肖像）css。恕我直言，风景和肖像的 80% 的 css 是相同的，其余 20% 可以使用第一个链接的幼稚 css 进行配置。

【讨论】：

Aaron 选项也非常好，因为您不必担心不支持它的浏览器。