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

时间:2014-01-24 03:14:12

标签: javascript jquery css d3.js

是否有一种快速简便的方法可以使用Javascript,D3JS或JQuery“永久”更改CSS的属性?我发现this问题会改变现有的几何图形:

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

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

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

1 个答案:

答案 0 :(得分:2)

Magic CSS变色小提琴:

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

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

该文档的stylesheet objects生效为document.styleSheets的列表。每个属性都有一个属性cssRules,它是一个规则列表,每个规则代表一个选择器和一个属性 - 值对列表。

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

你可以反复添加新的规则,每个规则都超过了之前的规则,但这并不是很有效。规则对象有一个“样式”地图,其中的键和值的表现与您预测的非常相似。

修改

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

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

您不能直接创建样式表对象,但可以创建<style>元素并将其添加到DOM中的html头对象。 When the <style> object is added to the document将为其创建样式表对象,can be accessed as the .sheet property of the element

修改后的小提琴在这里: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