使用jQuery或其他方式根据URL加载不同的css文件

Question

是否有可能引入ID特定的样式或根据您所在的“ URL”加载不同的CSS文件？

像这样的东西：

<script>
 if(location.href == 'http://jpftest2.tumblr.com/about'){ 
document.write('<style type='text/css'>
.social {
  display:none;
}

</style>'); 
} 

</script>

因此，当用户离开根URL进入“ / about”页面时。 我想介绍一下风格：

   .social {
  display:none;
}

如果还可以根据URL完全加载另一个CSS文件，会更好吗？

tumblr上的不同页面共享相同的标题，因此我无法在不同页面上引入不同的CSS

Answer 1

假设您的网站使用的是AJAX之类的内容（正确吗？）（否则，您将样式表放入文件的HTML <head>中），则可能会出现以下情况：

window.onpopstate = function() {
    if(window.location.path == '/about'){ 
        var css = document.createElement('style');
        css.type = 'text/css';
        css.rel = 'stylesheet';
        css.innerHTML = '.social{display:none;}';
        document.getElementsByTagName('head')[0].appendChild(css);
    }
}

但是我不推荐它。

Answer 2

您可以使用以下方法

<script type="text/javascript">
    $(document).ready(function(){

    if(your_url_condition){
            //for IE compatibility
            if (document.createStyleSheet){
                document.createStyleSheet('style.css');
            }
            else {
                $("head").append($("<link rel='stylesheet' href='style.css' type='text/css' media='screen' />"));
            }
        }
    });
</script>

这将起作用并可能对您有所帮助。

问候！

使用jQuery或其他方式根据URL加载不同的css文件

问题描述

2 个解决方案

解决方案1
2 2012-10-31 05:20:58

解决方案2
1 已采纳 2012-10-31 05:25:54

使用jQuery或其他方式根据URL加载不同的css文件

问题描述

2 个解决方案

解决方案1 2 2012-10-31 05:20:58

解决方案2 1 已采纳 2012-10-31 05:25:54

解决方案1
2 2012-10-31 05:20:58

解决方案2
1 已采纳 2012-10-31 05:25:54