从 html 页面删除/禁用样式表

Question

我正在使用两种样式。

例如Style1.css和Style2.css。

Style2.css 有一些样式会覆盖 Style1.css 样式。

有什么方法可以在加载时从 Html 中删除/禁用 Styles2.css 文件？

Answer 1

尝试仅在加载后添加样式表：//document.addEventListener('DOMContentLoaded', ...window.addEventListener('load', function(){  var link = document.createElement('link');  link.rel = "stylesheet";  link.href = "Styles2.css";  document.querySelector('head').appendChild( link );});

Answer 2

您可以动态删除样式window.addEventListener('load', function () {  const path = '[pathto]/Styles2.css';  const styles = document.querySelectorAll('link');  const style2 = Array.from(styles).find(k => k.href === path);  const head = document.getElementsByTagName('head')[0];  head.removeChild(style2);});

Answer 3

如果使用样式标签而不是单独的文件没有问题，您可以添加 id 并根据需要操作它们。HTML：<style id='style1'>color: red;</style><style id='style2'>color: red;</style>Javascript：const styleSheet = document.getElementById("#style1");remove(styleSheet);