使用 Javascript 禁用元素内的所有样式表

Question

如何使用 StyleSheet.disabled 禁用特定元素内的所有外部 CSS？ 不确定我是否只是缺少正确的语法。 如果只能在文档级别实现，有什么方法可以实现这样的吗？ 谢谢你。

HTML

<div id="container">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

  <i class="material-icons">edit</i>
  <button class="btn btn-primary">Bootstrap</button>
</div>

JS

let el = document.querySelectorAll('#container [rel="stylesheet"]');

for (let i = 0; i < el.length; i++) {
  el.styleSheet[i].disabled = true;
}

这是一个使用文档作为默认选择器的工作示例： JsFiddle

Answer 1

我认为您在代码中犯了一个错字：

let el = document.querySelectorAll('#container [rel="stylesheet"]');

for (let i = 0; i < el.length; i++) {
  el[i].disabled = true;
}

试试这个链接： https://jsfiddle.net/p0v3rdac/

Answer 2

您可以将href属性替换为自定义data-href属性（作为占位符）：

let elementStylesheets = [... document.querySelectorAll('#container [rel="stylesheet"]')];

for (elementStylesheet of elementStylesheets) {

  elementStylesheet.dataset.href = elementStylesheet.getAttribute('href');
  elementStylesheet.removeAttribute('href');
}