純CSS與dom樣式

Question

我逐漸意識到，通過外部或內聯css進行的大量操作也可以通過直接操作DOM來完成。 我還聽說過頁面加載，這樣可以更快。 另一方面，如果這樣做的話，任何缺少JavaScript支持的操作都會立即使我的整個應用無效（或者至少非常難看）。

關於這個問題有什么想法嗎？

Answer 1

CSS是用來設置頁面樣式的，因此您絕對應該使用它們。

如您所說，如果用戶禁用了JS，則頁面將無法正確設置樣式。

可以緩存外部CSS文件，從而節省帶寬，加載時間等。

與必須在腳本中找到值相比，更改CSS文件中的某些值更好，因此可維護性更高。

如果要動態更改元素樣式，只需使用JS更改它們的類，然后在CSS文件中為每個類創建不同的樣式，這樣您就可以僅使用JS來更改元素類，而不必在腳本中編寫所有CSS代碼。

編輯

我忘了提一下，在頁面加載（頂部）的頂部放置CSS可以在內容加載已設置樣式時顯示頁面，並且由於最好在頁面加載結束時添加腳本，如果您在腳本中添加樣式有機會從一開始就正確顯示該頁面，我認為這很糟糕。

Answer 2

CSS是樣式（X）HTML文檔的最佳方法。

即使您需要使用原始JavaScript或DOM或jQuery之類的框架來樣式化文檔，這也意味着您要為CSS規則賦予值。

規則應為：

• 當您可以為可預測的文檔設置樣式時，請使用純CSS- 也可以增強CSS並將CSS選擇器用於一般性或復雜方案 。

• 當文檔或文檔的一部分無法預測或動態創建並且您要應用諸如淡入淡出或其他任何特效的特殊效果時，請使用JavaScript / DOM或框架- 實際上，CSS 3.0具有過渡功能，因此可以很多沒有JavaScript的東西 -

畢竟，請考慮使用CSS可以使事情變得更加簡單，而使用JavaScript會產生什么樣的效果，並記住它的缺點（非常重要的一點：瀏覽器的兼容性和性能）。

您使用的CSS越多，瀏覽器的標准化程度，跨瀏覽器的性能和可維護性就越高。

Answer 3

如果通過DOM操作，您的意思是通過腳本更改元素的樣式屬性，那么可以確定，即使我不知道為什么要這樣做，也可以做到這一點，並且甚至可以在瀏覽器中使用。

請注意，我說的是“在瀏覽器中”：Internet Explorer（與瀏覽器相對）具有非常慢的DOM，並且缺少各種JS庫用於元素選擇的有用方法，這意味着對於許多選擇器，它們都必須遍歷大量元素來檢查它們是否與所選選擇器匹配。

在IE中選擇和遍歷元素確實非常昂貴。

因此，如果我正確理解，您的建議是丑陋的，不切實際的，並且對於IE完全不可用。 但是現在我很好奇：您為什么要使用JS進行所有樣式設置？ CSS文件（或內聯樣式）有什么問題？