更改内联样式与使用JS更改外部样式表样式



在HTML中内联更改样式的特定位或使用Javascript从外部样式表更改有什么好处?

例如,这篇文章解释了如何从外部样式表中完成样式更改。然而,这个过程似乎比内联更改要复杂得多,而且它还表示可能存在跨浏览器问题。然而,这篇帖子可能已经过时了(它已经3年了,其中一条评论说,即使在那时它也已经4年了)。还有其他更新的方法吗?

我之所以这么问,是因为我试图将HTML和CSS完全分开
然而,就代码的易读性和性能而言,简单地以内联方式而不是在外部样式表上指定要更改的样式可能更简单吗
在这方面有什么最佳做法吗?

使用Javascript临时访问或修改元素的样式时,无论该样式是在内联还是在css中定义的,都没有区别——您将获得按优先级应用的样式,Javascript更改将覆盖任何声明的样式。

然而,一般的最佳实践是有一个单独的样式表(如果您打算为IE9及以下版本提供条件样式表,或者将许多样式拆分为可管理的块,则可以有几个样式表)

当涉及到实时调试和更改样式时,这种方法不那么复杂。

使用外部样式表,您可以在几秒钟内通过放置一个新的.css文件来更改整个网站。使用内联样式无法做到这一点。

内联css没有任何好处,只是它会被赋予更大的重要性。

外部css具有缓存的好处。

但是,在渲染时,以下是遵循的顺序。

内联CSS样式比在<style></style>中声明的样式更重要,在<style>中声明的风格比在外部CSS中声明的款式更重要。文件。

内联css甚至<style>都不是首选,而且通常是不好的做法,因为额外的字节是通过HTTP传输的,并且它们不能像外部css文件那样缓存。

使用javascript的样式应该只是添加一个类或删除一个类,或者隐藏并显示它们,以改善用户体验。

最新更新