在前端开发中，我们经常会遇到浏览器默认样式对页面渲染造成影响的问题。为了解决这个问题，我们会使用 CSS Reset 或 Normalize.css 等方案来清除默认样式。然而，CSS Reset 方案通常都比较暴力，很容易造成问题并且增加代码量。那么有没有一种更好的方式来清除默认样式呢？答案是肯定的，这篇文章将介绍一种利用 JavaScript 的方式来清除默认样式的技巧，帮助你更好地控制元素样式。
为什么需要清除默认样式
浏览器默认样式是指用户代理（例如Chrome、Firefox）的设定的、HTML 元素的默认样式。这些默认样式是为了统一页面元素的显示效果，但是他们常常会产生一些我们没有预期的效果，比如许多浏览器对 <ul> 和 <li> 元素的默认间距、字体大小等的设定，使页面呈现效果在不同的浏览器下有所不同。
传统的 CSS Reset 方案
在传统的 CSS Reset 方案中，我们通常会设置统一的样式来删除所有元素的默认样式，并在此基础上重构我们自己的样式。以下是一个简单的例子：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - -- ------ ------ -- ---- - ------------ ------------ ----------- ---------- ----- ------------ ---- ------ ----- -
虽然这种方式可以清除默认样式，但他们可能会影响到我们自己的样式，而且增加了额外的代码量。如何解决这个问题呢？我们可以利用 JavaScript 来删除默认样式，具体方法如下。
用 JavaScript 重置元素
在 JavaScript 中，Element 对象有一个 style 属性，可以用来设置元素的样式。我们可以循环遍历所有元素然后删除其默认样式。下面是一个简单的例子，它使用了 querySelectorAll 方法来找到所有的 ul 元素并删除它们的间距。
-- -------------------- ---- -------
----
-------- ------
-------- ------
-------- ------
-----
--------
----- --- - --------------------------------
--- ---- - - -- - - ----------- ---- -
------------------- - --
-------------------- - --
---------------------- - -------
-
---------这个代码可以删除 <ul> 元素的默认内外边距并将列表样式设置为 none。
在这个例子中，我们使用了 querySelectorAll 方法来获取所有的 <ul> 元素，然后使用循环遍历它们并在其上面设置样式。我们可以根据需要设置任意样式，并且不会对其他元素产生任何影响。
拓展
如果你想更全面的清除默认样式，可以使用 normalize.css 库，它是一种轻量级的、灵活的 CSS Reset 方案，同时不会破坏页面的布局。它是一种先进的方案，使用了更加现代的 CSS 技术。
总结
在这篇文章中，我们介绍了如何使用 JavaScript 来清除页面元素的默认样式，并展示了如何避免使用传统的 CSS Reset 方案带来的问题。这种技巧可以帮助开发者更好地控制每一个元素的样式，并在不影响其他元素的情况下更好的实现页面布局。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e016980a9b385b9c1d02