javascript - 我可以使用 javascript 更改单个页面的 css 条目(而不是交换样式表)吗？

Question

我知道可以更改当前页面上元素的 css 属性:

$('.changeMyStyle').css("color", "#FF0000");

但这不会影响更改后添加的新元素。

我知道有可能 remove, add, or swap out加载页面后重新设置页面样式的 css 样式表:

$('link.swappableStylesheet').attr('href', 'path/to/new/style.css');

但对于更改一个或两个属性来说，这是一个糟糕的解决方案，尤其是更改以编程方式确定的值(例如从颜色选择器更改颜色)。

我可能会 grab a stylesheet's raw data ，搜索并修改它:

var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules; // IE compatibility

rules[0].style.padding= '0.32em 2em';
// assumes the first entry in the first stylesheet is the one you want to modify.
// if it's not, you have to search to find the exact selector you're looking for
// and pray it's not in a slightly different order

但这也是一个糟糕的解决方案，需要 IE 兼容性 hack。

这个链接的答案还建议附加另一个 <style>元素并在那里添加CSS。这可以适用于狭窄的情况，但它仍然不理想(答案是 5 年了，所以现在可能有新工具可用)。

有没有办法在选择器和属性级别而不是样式表级别或 DOM 元素级别更改页面的 css？ jQuery 和 vanilla javascript 解决方案都受欢迎，还有专门为此设计的库。理想情况下，我想要像

这样简单和通用的东西

$(document).stylesheet('.arbitraryCssSelector.Here').put('color', '#FF0000');

...哪里.stylesheet('.Here.arbitraryCssSelector')将修改完全相同的样式条目。

Answer 1

即使是 Chrome 的开发工具也只是修改它在您进行修改或添加新规则时使用的样式表。目前没有办法解决它，但您可以在使用最新规则更新的页面底部保留一个专用样式表。如果它是空的或包含无效规则，它将返回到当前样式表。如果存在任何库，这就是它的工作方式，而且代码很少。

我认为保持整洁的关键是继续覆盖一个样式表，而不是向 DOM 添加新的样式表。

document.getElementById("dynamic-color").addEventListener("input", function () {
  document.getElementById("dynamic-styles").innerHTML = "label { color: " + this.value + " }";
});

label {
  color: blue;
}

<label for="#dynamic-color">Change the label's color!</label>
<input id="dynamic-color" />

<style id="dynamic-styles"></style>