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

您可以使用@optimus prime 答案添加 style1

Answer 3

不，您不能只是删除或禁用样式表，但是您可以覆盖样式您想要添加的样式，因为 !important 其他文件样式应该很简单。 或者你可以改变文件的位置更重要的是第二个文件就像我需要V2样式表所以我稍后会添加第一个所有样式应该用第二个文件渲染

Answer 4

如果使用样式标签而不是单独的文件没有问题，您可以添加 id 并根据需要操作它们。

HTML：

<style id='style1'>color: red;</style>
<style id='style2'>color: red;</style>

Javascript：

const styleSheet = document.getElementById("#style1");
remove(styleSheet);