从 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);