使用JS更改內聯樣式與更改外部樣式表樣式

Question

在HTML中更改內聯樣式的特定位 或 使用Javascript從外部樣式表進行更改有什么好處？

例如， 這篇文章解釋了如何從外部樣式表完成樣式更改。 但是，該過程似乎比內聯更改要復雜得多，它還表示可能存在跨瀏覽器的問題。 但是，該帖子可能已經過時了（它已經3歲了，並且其中一條評論甚至說它是4歲）。 還有另一種更新的方法嗎？

我之所以這樣問是因為我試圖使我的HTML和CSS完全分開。
但是，就代碼的易讀性和性能而言，僅指定要內聯更改的樣式（而不是在外部樣式表上）是否更簡單？
關於此事是否有最佳實踐？

Answer 1

當使用Java腳本臨時訪問或修改元素的樣式時，該樣式是內聯定義還是在CSS中定義沒有區別-您將獲得優先級應用的樣式，並且Java更改將覆蓋任何聲明的樣式。

但是，一般的最佳實踐是擁有一個單獨的樣式表（或者，如果您打算為IE9及以下版本使用條件樣式表，或者將很多樣式分成可管理的塊，則可能是幾個樣式表）

當涉及實時調試和樣式更改時，此方法不太復雜。

使用外部樣式表，您可以通過放置一個新的.css文件，在幾秒鍾內更改整個網站。 內聯樣式不能做到這一點。

Answer 2

inline-css不會帶來任何好處，只是它會更加重要。

外部CSS具有被緩存的好處。

但是，在渲染時，遵循的順序如下。

內聯CSS樣式比在<style></style>聲明的<style>更重要，在<style>聲明的<style>比在外部CSS中聲明的樣式更重要。 文件。

內聯css甚至<style>都不是首選，通常是不好的做法，因為多余的字節是通過HTTP傳輸的，它們不能像外部css文件一樣被緩存。

使用javascript進行樣式設置僅取決於添加類或刪除類或隱藏並顯示它們，以改善用戶體驗。