如何在不重新加载的情况下动态更改网页上的 CSS 样式？

动态交换 CSS 样式

您想要动态更改网页的 CSS 样式，将一个样式表替换为另一个样式表。在普通 JavaScript 或 jQuery 中，您可以通过包含所有必需的样式表，然后有选择地激活或停用它们来实现此目的。

选项 1：切换 rel=alternate

包含样式表使用“rel=alternate”并切换其状态：

<code class="html"><link rel="stylesheet"           href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css"  id="dark"  title="Dark"></code>

<code class="javascript">function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}</code>

选项 2：设置和切换禁用

包含带有“rel=stylesheet”的样式表和“class=alternate”，并切换其“禁用”属性：

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css"  id="dark"  class="alternate"></code>

<code class="javascript">function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}</code>

选项 3：切换 media=none

包含带有“的样式表media=none”并切换其“media”属性：

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css"  media="none" id="dark"></code>

<code class="javascript">function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}</code>

使用 getElementById、querySelector 或其他方法选择样式表节点。如果需要，可以使用 jQuery 进行进一步处理。这种方法允许您即时切换 CSS 样式，而无需重新加载页面。

以上是如何在不重新加载的情况下动态更改网页上的 CSS 样式？的详细内容。更多信息请关注PHP中文网其他相关文章！