如何根據URL或客戶端加載CSS文件

我的Sencha touch應用程序中有兩個CSS文件。讓我們叫他們A.css和B.css。基於URL，我希望應用程序加載不同的CSS。如何根據URL或客戶端加載CSS文件

可以說URL 1是www.website.com/#1所以這個我想加載A.css。同樣的URL 2是www.website.com/#2所以這個我想加載B.css

是否有可能基於URL動態加載CSS？

2014-07-21 Nick Div

您可以使用下面的JavaScript代碼動態加載css以滿足您的需求。

if (window.location == "http://www.website.com/#1") { 
    LoadCSS("A.css") 
} 
else if(window.location == "http://www.website.com/#2") { 
    LoadCSS("B.css") 
} 

function LoadCSS(filename) { 
    var fileref = document.createElement("link"); 
    fileref.setAttribute("rel", "stylesheet"); 
    fileref.setAttribute("type", "text/css"); 
    fileref.setAttribute("href", filename); 
}

來源

2014-07-21 08:08:41

我假設你有一個模板可用於2個URL。使用javascript加載CSS是一個非常糟糕的做法，因爲它速度很慢，它給用戶帶來不好的體驗，因爲沒有最初的樣式。

無論如何，您可以使用附加功能將CSS添加到您的頭部。

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url'));

而對於URL本身只需使用JS window.location的，像這樣：從URL

if (window.location == "#1url") { 
    // load A.css using the append function above 
}

來源

2014-07-21 08:10:56 gulty

雖然你做了一個答案，他沒有要求jQuery的答案。（查看標籤） –

順便說一下，Jquery是一個跨平臺的Javascript庫。你的論點是無效的，Javascript從來不是一個壞習慣，大概不是一個壞習慣。不過，您在使用Jquery時正在使用JavaScript。 –

標籤已被編輯。 jquery已經成爲之前的標籤之一。並使用js在domready上加載css是一種不好的做法。出於明顯的可用性原因，應始終在任何javascript之前加載css。 – gulty

獲取散列標籤值，然後根據不同的值更改鏈接，CSS

到獲得散列標記值

$url = "www.website.com/#1"; 
$params = parse_url($url); 

$value = $params['fragment'];

這會給你散列標記值，然後根據值鏈接CSS文件在標題中

<?php if($value == 1){ ?> 
<link href="A.css" rel="stylesheet" type="text/css" /> 
<?php } else{ ?> 
<link href="B.css" rel="stylesheet" type="text/css" /> 
<?php } ?>

來源

2014-07-21 08:14:48

您可以使用Javascript正則表達式爲此。非常容易的方法

// For www.website.com/#1 
    if(/www.website.com\/#1/.test(window.location.href)){ 
     /* Your Code Here For Loading Css */ 
    } 

    // For www.website.com/#2 
    if(/www.website.com\/#1/.test(window.location.href)){ 
     /* Your Code Here For Loading Css */ 
    }

希望這有助於！

來源

2014-07-21 08:30:42 Khalsa

如何根據URL或客戶端加載CSS文件

回答

相關問題