获取特定的css类的值，使用d3js

我有一个HTML表格，我想设置表格的特定部分的颜色（border-top-color of cell归类为“第一个”）。为了获得我需要在css类中访问特定值的颜色。获取特定的css类的值，使用d3js

例子：

表

<table class="tabla"> 
    <caption>Title</caption> 
     <tr> 
     <td class="first">A</td> 
     <td class="first">157</td> 
     </tr> 
</table>

CSS 这是我需要能够得到色彩

.color { fill: #95ccee; 
     background-color: #95ccee; 
     }

要实现，我使用D3类。 js以下方式

var selectTablas = d3.selectAll (".tabla"); 
    selectTablas.selectAll(".first") 
       .style("border-top-color", "Here the function that will get the color");

函数应循环数据集，并根据“d”获取不同类的不同值。

在此，扩展代码

http://jsfiddle.net/ploscri/dHYcd/

预先感谢。

来源

2013-10-07 Pablo

这里缺少一件重要的作品 - 您想如何将“d”（我认为是“差异”栏？）映射到颜色？基于范围？某种十六进制转换？有差别可能是最大范围吗？你有没有具体的颜色映射方法？如果你添加这些细节，我很乐意添加一个答案：） –

好的，这是我的第一次刺伤它。问题不是很清楚，但是这个函数为您提供了一种将类名传递给它并检索该类颜色的方法。我用你在问题中的颜色更新你的例子。我假设你有一个函数将差异值映射到一个类名。

http://jsfiddle.net/dHYcd/1/

我在这里做的第一件事是让隐藏的类携带颜色测试的容器。为了从CSS中获取值，它需要存在于html中，我认为它已经存在。如果不是，我不知道你为什么要这样做，而不是仅仅定义JavaScript中的颜色。

<div id='colors'> 
    <span class='color1'></span> 
</div>

接着补充说，你有CSS声明在你的问题，但不是在的jsfiddle，却改变了fill和background-color只是color。我也确保包含颜色的div被隐藏了，所以它不会干扰这个例子。

#colors { display: none } 
#colors .color1 { color: #95ccee }

最后，实际从类中获取颜色的功能相当简单。代码如下复制：

function get_color(classname){ 
    var el = document.querySelector('#colors .' + classname); 
    return getComputedStyle(el).getPropertyValue('color'); 
}

此功能只是抓住根据您提供作为自变量的类名的元素，然后抓起color的CSS值。你可以看到，如果你想获得另一个属性值，或者甚至将该属性值作为第二个参数添加到函数中，将会很容易换掉color，但是在这个例子中我没有看到这个需要。

希望这会有所帮助，如果这不是你所追求的，我很抱歉，这个问题有点难以解释。随意添加评论或编辑以澄清问题，我会更新答案以更接近您之后的内容（如果我这次没有指定它）。

编辑

OP澄清说，他们正在寻找一种存储颜色值的最佳方式，并推测这将是在CSS。我会说这不是存储颜色值的最佳方式，并且建议将它们存储在JavaScript中的对象中，因为它们只在JavaScript中需要。这里是存储的颜色以更好的方式更新的小提琴：

http://jsfiddle.net/dHYcd/2/

如果更改colors.blue到colors.red你会看到，你可以很容易地将不同的颜色之间切换，而且语法是原生的JavaScript无论如何。

来源

2013-10-07 01:18:35

谢谢杰夫。我对这个不明确的问题表示歉意。这是一个更大项目的一小部分。我有全局的css类，其颜色值（例如，“.color”），我使用这些类来设置DOM中不同元素的颜色。这适用于允许使用背景色或填充属性的对象（有时使用类来设置SVG元素的颜色）。但有时我需要设置一个元素的一部分的颜色（例如border-top-color），我想从类中获取颜色。我无法改变这些类的结构。有没有办法做到这一点？ – Pablo

是的，我的整个答案就是这样 - 一个函数，允许您从CSS类获取属性值。那里有什么遗漏吗？如果你让我确切地知道缺失的部分是什么，那么很乐意扩大或澄清。 –

嗨，杰夫。我需要的是一种在DOM中没有元素的情况下获取css类的值的方法。在你的答案中，你使用一个元素（#color）从css中获取值。我不想在javascript中编写颜色，因为我想将颜色保留在一个地方，CSS分类。可能我的应用程序方法并不是最好的，我不是我想了解它的程序员。不管怎么说，还是要谢谢你。 – Pablo

获取特定的css类的值，使用d3js

回答

相关问题