通過document.write（）添加簡單靜態<style>標籤的原因是什麼？

我只是看着一個random app page對apptivate.ms網頁源代碼，並注意到這個JavaScript在<head>：通過document.write（）添加簡單靜態<style>標籤的原因是什麼？

<script type="text/javascript"> 
     document.write("<style type=\"text/css\">.app-description { max-height: 600px }</style>"); 
</script>

這顯然是在客戶端完全靜態的，所以我不知道該用例有什麼。由於他們堆棧交換開發人員（誰是幕後apptivate.ms）是非常聰明的我當然有一些理由，但我不知道哪個。我想這是關係到延遲規則變得活躍，直到整個文檔加載，但我希望規則一旦瀏覽器「看到」新標籤應用...

來源

2012-11-30 ThiefMaster

這是因爲部分.app-description元素的內容是隱藏的，可以通過點擊「顯示更多」按鈕來顯示。

如果JavaScript被禁用，該按鈕將不起作用，所以如果有問題的樣式直接在樣式表中，您將無法看到其餘的內容。通過使用JavaScript在<head>中添加該樣式，可以確保啓用了JS的用戶不會一次看到所有內容，而是獲得「增強」體驗，而啓用了JS的用戶仍然可以使用網站。

下面是JS啓用時的截圖。「顯示更多」按鈕，使用JavaScript來擴大元素全高：

enter image description here

這是一個很好的方法來逐步增強 - 通過使用document.write內head你避免任何可能插入新style元素（在這種情況下，開發人員可能會等待DOM準備好，然後使用JavaScript動態添加maxHeight屬性，但這會導致用戶在DOM準備就緒之前執行JavaScript之前會看到全高）。

來源

2012-11-30 14:55:00

又名漸進增強。剛剛意識到有很多東西我需要在我的應用程序中糾正.. Tks .. – techfoobar

@techfoobar如果這是你正在計劃的「噸需要糾正的東西」，我不會使用這種方法。更好，更簡單的方法是將'class =「js」'應用於啓用JavaScript的用戶的身體標記，然後相應地定位您的CSS。 – Pebbl

當然。我不會在任何地方添加腳本標籤。但是我記住了到目前爲止我一直忽略的大量用戶，因爲缺乏這種認識。 – techfoobar

這被稱爲「漸進式」增強。基本上，這個概念很簡單，不要以爲每個人都會啓用JavaScript，即使其中98％會......但如果他們這樣做，讓我們做一些好的事情吧。

的想法是讓你DOM（HTML）的地方，沒有明確的NEED工作必須激活JS使用它。

然後，如果JS加載（在這種情況下它將不得不添加該樣式），您可以使用特定類名稱來定位元素。在這種情況下，它是.app-description。如果您沒有開啓JS，則該項目不會受到影響。

希望是有一定道理:)

編輯：現在，你仍然可以加載JS文件，做一些CSS的東西，但它之所以被放置在腳本標籤本身的頁面上，是因爲如果不需要HTTP請求，你可以一起避免使用HTTP請求。

來源

2012-11-30 15:03:46

啊嘿，好點。我明顯知道PE，但在這種情況下並沒有真正考慮PE。但是，我寧願使用'

通過document.write（）添加簡單靜態<style>標籤的原因是什麼？

回答