在前端开发中，我们经常需要修改 HTML 元素的样式。通常情况下，我们会将 CSS 样式直接写在 HTML 文件或内部样式表中。但是有时候，我们需要从外部链接（如 CDN 或第三方库）引入 CSS 文件，并使用这些文件中定义的样式来更改特定 HTML 元素的样式。
方法一：使用JavaScript
在 HTML 的 head 中，我们可以添加一个外部 CSS 文件的链接。然后，我们可以使用 JavaScript 来选择要更改样式的 HTML 元素，从而修改其样式，如下所示：
-- -------------------- ---- -------
------
----- ---------------- -------------------------------------
-------
------
---- ---------------------- ------------
--------
-- --------
----- --------- - --------------------------------------
-- ----
--------------------- - ------
------------------------------- - ---------
---------
-------在上面的代码中，我们首先将 style.css 文件引入到 HTML 中。然后，我们使用 document.querySelector() 方法选择要更改样式的 HTML 元素。最后，我们可以使用 .style 属性来更改它的 CSS 样式。
方法二：使用 CSS 变量
CSS 变量是一个非常强大的工具，可用于动态更改页面上所有元素的样式。我们可以在 HTML 的 head 中定义一些 CSS 变量，然后在元素的样式中使用这些变量。当我们想要更改样式时，只需更改变量的值即可。
-- -------------------- ---- -------
------
----- ---------------- -------------------------------------
-------
----- -
----------- ----
---------------------- -------
-
--------
-------
------
---- ---------------------- ------------
--------
-- ------
-------------------------------------------------------- --------
------------------------------------------------------------------- ---------
---------
-------在上面的代码中，我们首先将 style.css 文件引入到 HTML 中。然后，我们在 :root 选择器下定义了两个 CSS 变量 --my-color 和 --my-background-color。最后，我们可以使用 JavaScript 代码来更改这些变量的值。
在元素的样式中，我们可以使用这些变量来设置颜色和背景颜色，如下所示：
#my-element {
color: var(--my-color);
background-color: var(--my-background-color);
}结论
以上是从外部链接改变 HTML 元素样式的两种方法：使用 JavaScript 和 CSS 变量。两种方法都有其优缺点，视具体情况而定。使用 JavaScript 可以更精确地控制每个元素的样式，但需要编写更多的代码。使用 CSS 变量可以更轻松地更改整个页面的样式，但在一些旧版浏览器上可能不受支持。
不管你选择哪种方法，都应该注意代码的质量和性能。在修改元素的样式时，尽可能减少 DOM 操作和重新渲染的次数，以提高页面的响应速度和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26307