使用 Javascript 交换两个样式表 CSS 文件

我正在为移动设备编写一个网络应用程序，我正在做的是动态更改 css 并为用户存储该选项，我一直在寻找整夜，谷歌搜索方法和方式来实现我的目标，但没有任何效果。

这是我正在使用的按钮类型，这里出现了另一个问题，因为我无法选中和取消选中复选框。

.HTML

<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet()">

对我来说唯一有效的是：

<head>    
<link id="pagestyle" rel="stylesheet" type ="text/css" href="default.css">
    <script type="text/javascript">
        function swapStyleSheet(sheet) {
            document.getElementById('pagestyle').setAttribute('href',sheet);
        }
    </script>
</head>

和在身体

<input id="#checkbox" type="checkbox" checked onclick="swapStyleSheet("Second.css")">

但这不是动态的，因为一旦用户点击按钮就无法返回，我不确定这是否适用于移动设备

有什么建议如何进行吗？

你忘了引号Second.css

onclick="swapStyleSheet('Second.css')"

没有引号，这是一个语法错误(但您的控制台已经告诉您这一点(。

这里有一个豁免链接，逐步展示了如何切换两个CSS工作表文件

但是对于输入的类型，我不确定您该怎么做

我不建议像这样更改样式表。以下是我的理由：

加载另一个文件可能会导致两种样式之间的"硬"过渡。您编写了一个移动 Web 应用程序，因此想象一下互联网连接不稳定的人加载您的应用程序。您的 Web 应用程序将在几秒钟内取消样式。
浏览器需要加载另一个文件(如果要切换回来，它可能会再次加载原始文件，具体取决于缓存设置(
例如，可以用.scss更容易地解决(但也可以用普通.css(。我在下面给你举了一个例子。您甚至可以添加过渡，因此您的更改更加令人愉快。

function rotateStyle () {
  document.body.id = document.body.id == 'alternate' ? '' : 'alternate';
}

body {
  background-color: #FFFFFF;
  color: #000000;
  /* you could also add transitions */
  transition: background-color 2s;
}
body#alternate {
  background-color: #000000;
  color: #FFFFFF;
}

<body>
  <!-- your content -->
  
  <button onclick="rotateStyle()">Change your style</button>
</body>

相关内容

最新更新

热门标签：