使用Javascript / D3JS / JQuery永久更改CSS属性

有没有一种快速简便的方法来“永久地”使用Javascript，D3JS或JQuery更改CSS的属性？ 我发现这个问题会改变几何已经存在的问题：

$('.myClass').css({ ...Your CSS properties here... }); 

但是，我想更改CSS属性，以便在该会话中创建的几何体也将具有这些更新的更改。 我怎样才能使用Javascript将下面的CSS类从钢笔的笔触更改为浅灰色的笔触？

 .P0{ fill:none; stroke-width:1.25px; stroke:steelblue;} 

Answer 1

Magic CSS变色小提琴：

http://fiddle.jshell.net/8xkv3/3/

关键思想是访问CSS对象模型中的最后一个样式表，并在该样式表的末尾添加一个CSS规则，为所需的选择器指定所需的属性。 您需要最后 一个样式表的最后一个规则，以便它覆盖级联中的任何其他内容（当然，除了内联样式）。

对文档有效的样式表对象在document.styleSheets中以列表forms提供。 每个都有一个属性cssRules ，它是一个规则列表，每个规则代表一个选择器和一个属性 – 值对列表。

stylesheet.insertRule()方法从字符串创建新规则，并将其添加到指定索引处的工作表。 不幸的是，它只返回索引，而不是规则对象，因此我们必须重新选择它以保存以备将来修改。

你可以反复添加新的规则，每个规则都超过以前的规则，但这并不是很有效。 规则对象有一个“样式”映射，其键和值的作用与您预测的几乎相同。

编辑

我意识到上述方法存在问题。 如果列表中的最后一个样式表没有被当前网页使用，会发生什么？ 如果它是打印样式表怎么办？ 或者是小屏幕或语音合成器的样式表，还是任何其他媒体查询限制情况？ 您可以向该样式表对象添加规则，但它不会产生任何影响。

显然，您需要做的是创建一个没有限制和/或只有您选择的限制的新样式表对象。 然后，您可以将此样式表添加到列表的末尾，并将动态样式规则添加到其中。

您无法直接创建样式表对象，但可以创建

元素并将其添加到DOM中的html头对象。 将

对象添加到文档时，将为其创建样式表对象，并可以作为元素的.sheet属性进行访问 。

修改过的小提琴在这里： http ： //fiddle.jshell.net/8xkv3/6/

关键代码：

  if (!rule) { //create a new page-wide style element var styleElement = document.createElement("style"); styleElement.type = "text/css"; //probably not necessary (CSS is default), //but it doesn't hurt to be explicit document.head.insertBefore(styleElement, null); //once inserted in the document, a valid //CSSStyleSheet object is created and attached //to the styleElement object var styleSheet = styleElement.sheet; var ruleNum = styleSheet.cssRules.length; //console.log(styleSheet); styleSheet.insertRule( ".changeable{color:#"+hex[1]+";}", ruleNum); rule = styleSheet.cssRules[ruleNum]; //console.log(rule); } else { rule.style["color"] = "#"+hex[1]; }; 

顺便说一句，我不知道为什么在我之前搜索MDN时没有出现这个问题，但这里有一篇关于动态操作CSS OM的各种方法的好文章：
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_dynamic_styling_information