2 sinat 26662021 sinat_26662021 于 2016.03.27 21:24 提问

关于用jquery 修改CSS

有CSS代码如下

path[data-classbreak="classbreak0"] {
    stroke: rgb(255, 245, 220); 
            stroke-width: 1pt; 
        stroke-opacity: 0.35; 
            fill:   #00008B;
            fill-opacity: 0.8;
        }

        path[data-classbreak="classbreak1"] {
        stroke: rgb(255 ,140 ,0); 
        stroke-width: 1pt; 
        stroke-opacity: 0.35; 
            fill: #1E90FF;
            fill-opacity: 0.8;
        }

        path[data-classbreak="classbreak3"] {
        stroke: rgb(255, 245, 220); 
            stroke-width: 1pt; 
        stroke-opacity: 0.35; 
            fill:   #00008B;
            fill-opacity: 0.8;
        }

            现在需要在一个回调函数中用jquery动态地修改特定类别的属性值,但是不知道如何选中该类别,比如如何修改 path[data-classbreak="classbreak3"]中的fill属性?
            另外,这个CSS复制于其它地方,求问 path[data-classbreak="classbreak3"]这种写法中,data-classbreak应该是个属性名,classbreak3是个属性值,那么外面的path[]是什么意思?   谢谢!

2个回答

u012392706
u012392706   2016.03.27 21:48
已采纳

其实在所有样式中,能够作用于一个元素上的样式的相同属性,最终只有排在最后的一个有效。而在没有规定重要级别的情况下,
内联样式将是最终作用的,就是传说中写在元素style属性内部的css样式。
你可以尝试下面的方案,通过jquery去获取相应的元素,从而改变它的指定属性,如你所说的fill.

 $(".class名称[元素属性='属性值']").css("样式属性", "样式属性值");
 举例:
 $(".path[data-classbreak='classbreak3']").css("fill", "#CCC");

理解起来也很简单,包含有path class 并且元素属性data-classbreak值为classbreak3的元素。

u012392706
u012392706 回复sinat_26662021: 你先看一下,node生成最终的元素是什么,根据你的代码片段,可以猜测出node生成的元素中有属性为dataclassbreak,值为classbreak0,只要在包含这些node的上级元素找一个特别的就可以找到对应的元素了。具体看我的后面补充的答案。
一年多之前 回复
u012392706
u012392706 回复sinat_26662021: 解决了吗?不好意思,刚才不在线。
一年多之前 回复
sinat_26662021
sinat_26662021 回复sinat_26662021: 你好!好像还是没解决, path并不是一个class,源代码中有一句node.setAttribute("data-classbreak", “classbreak0”); 就是说这个CSS里面的东西只是一些属性,并没有对应特定的DOM的元素,所以用CSS的元素选择器的方法改不了这个属性值,你知道path可能是什么意思或者应该怎么改吗?
一年多之前 回复
sinat_26662021
sinat_26662021 你好!好像还是没解决, path并不是一个class,源代码中有一句node.setAttribute("data-classbreak", category); 就是说这个CSS里面的东西只是一些属性,并没有对应特定的DOM的元素,所以用CSS的元素选择器的方法改不了这个属性值,你知道path可能是什么意思或者应该怎么改吗?
一年多之前 回复
sinat_26662021
sinat_26662021 谢谢!
一年多之前 回复
u012392706
u012392706   2016.03.28 13:10

补充答案:
你最好还是要看一下node对象长什么样子,通过谷歌浏览器F12,就可以看生成的node具体什么样子的。
或者直接看你使用的这个插件,node结构,或者找API看都行。要知道一个成熟的插件,
是不需要自己写太多的代码去控制的,必然提供了某些设置属性的方法来实现效果的转换。
谷歌浏览器查看生成后的元素方法如下:
图片说明

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!