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兼容性黑客攻击。

这个链接的答案还建议添加另一个<style>元素并在那里添加css。可以适用于狭窄的案例，但它仍然不理想（答案是5年，所以现在可以使用新工具）。

有没有办法在选择器上改变页面的CSS？属性级别而不是样式表级别或DOM元素级别？欢迎使用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>

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

1 个答案: