僅當用戶啓用JavaScript時才使用一些CSS

爲了讓我的網頁優雅地降級，我有一些CSS只能在其相應的JavaScript函數中加載才能加載。僅當用戶啓用JavaScript時才使用一些CSS

當且僅當瀏覽器啓用JavaScript時，加載本地CSS的最簡單方法是什麼？

另外它是一個相當大的CSS塊，所以我寧願不必編寫JavaScript行來添加每個屬性。（哦，如果有必要，我可以使用jQuery）。

2011-07-21 Jon Cox

我並不想成爲迂腐，但如果你的CSS依賴於javascript看起來是正確的，那麼它並不是真正將內容分離出來。 – doctorless

現在看看modernizr.com以及... – binarious

也許他的意思是說，它是CSS的元素，只有在啓用了JavaScript的情況下才會出現，比如增強的UI組件。 – shanethehat

在「noJS」的主體標籤上設置一個類。然後使用Javascript來刪除該類。

對於要使用時，沒有JS是存在的CSS規則，只需要使用.noJS .myRules {}

2011-07-21 16:27:21 edeverett

+1我肯定會在我的''文檔之前使用它。寫（）'建議 –

這就是我要做的，你可以在你應該（頁面上的第一件事）時加載CSS，然後執行JavaScript（僅將部分添加到本體）。一切都會很好地加載。 – aepheus

謝謝，這是一個非常簡單的修復:)儘管我已經添加了一個js類，但它是相同的區別。 –

在<head>中，您可以將其與document.write()一起使用。我從來沒有嘗試過，但它理論上應該起作用。沒有腳本執行意味着沒有加載樣式表。

<head> 
    <script type='text/javascript> 
    document.write("<link rel='stylesheet' href='your.css' media='whatever />"); 
    </script> 
</head>

2011-07-21 16:27:16

退房身體條件語句爲html5 boilerplate來看看如何使用Modernizr的。

然後寫你的CSS選擇器。沒有-JS .addl-選擇{}

2011-07-21 16:29:31 brokenindexfinger

您有幾種選擇。

我喜歡的是將以下代碼添加到body標籤。

<body id="no-js"><script>document.body.id="js"</script>

然後我可以指定我主人CSS #no-js和#js。

另一個選項是使用JavaScript加載額外的樣式表，但這樣會減慢初始加載速度，我試圖避免這種情況。

2011-07-21 16:30:30 Emil

我只是這樣做：

document.documentElement.className = "js"

這增加js類<html>標籤，那麼你可以使用針對通過CSS的元素：

.js #someid{}

2014-05-07 20:39:40 simPod

回答