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

Is there a quick and easy way to 'permanently' change properties of CSS with Javascript, D3JS, or JQuery? I've found this question which will change geometry already existing:

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

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

However, I want to change a CSS property so that the geometry that is created in that session will have these updated changes as well. How can I, using Javascript, change the CSS class below from a stroke of steelblue to a stroke of light grey?

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

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

1 个解决方案

#1

Magic CSS colour changing fiddle:

Magic CSS变色小提琴：

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

The key idea is to access the last stylesheet in the CSS Object Model, and add at the end of that stylesheet a CSS rule specifying the property you want for the selector you want. You want the last rule of the last stylesheet, so that it over-rides anything else in the cascade (except inline styles, of course).

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

The stylesheet objects in effect for the document are available as a list at document.styleSheets. Each one has a property cssRules which is a list of rules, which each represent a selector plus a list of property-value pairs.

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

The stylesheet.insertRule() method creates a new rule from a string, and adds it to the sheet at the specified index. Unfortunately, it just returns the index, not the rule object, so we have to re-select it to save for future modification.

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

You could just repeatedly add on new rules, each over-riding the previous, but that's not very efficient. The rule object has a "style" map with keys and values acting pretty much as you'd predict.

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

Edit

I realized there is a problem with the above approach. What happens if the last stylesheet in the list isn't being used by the current web-page? What if it's a print stylesheet? Or a stylesheet for tiny screenss, or speech synthesizers, or any other media-query limited situation? You could add a rule to that stylesheet object, but it wouldn't have any effect.

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

Clearly, what you need to do is create a new stylesheet object with no restrictions and/or with only the restrictions you chose. Then you can add this stylesheet to the end of the list and add your dynamic style rules to it.

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

You can't create a stylesheet object directly, but you can create a <style> element and add it to the html head object in the DOM. When the <style> object is added to the document a stylesheet object will be created for it, and can be accessed as the .sheet property of the element.

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

The amended fiddle is here: http://fiddle.jshell.net/8xkv3/6/

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

Key code:

关键代码：

    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];
    };

By the way, I don't know why this didn't show up when I searched MDN previously, but here's a good article on the various ways of dynamically manipulating the CSS OM:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_dynamic_styling_information

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

#1

Magic CSS colour changing fiddle:

Magic CSS变色小提琴：

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

You could just repeatedly add on new rules, each over-riding the previous, but that's not very efficient. The rule object has a "style" map with keys and values acting pretty much as you'd predict.

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

Edit

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

The amended fiddle is here: http://fiddle.jshell.net/8xkv3/6/

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

Key code:

关键代码：

    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];
    };

秒客网

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

1 个解决方案

#1

Edit

#1

Edit

相关文章