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

Question

我有一个 HTML 表格，我想设置表格特定部分的颜色(分类为“第一”的单元格的边框顶部颜色)。 为了获得颜色，我需要访问 CSS 类中的特定值。

例子:

表格

<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/

提前致谢。

Answer 1

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

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

我在这里做的第一件事是制作一个隐藏类的容器，其中包含用于测试的颜色。为了从 css 中获取值，它需要出现在 html 中，我认为它已经存在于某个地方。如果不是，我不知道你为什么要这样做而不是仅仅在 javascript 中定义颜色。

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

接下来，添加您在问题中有但不在 jsfiddle 中的 css 声明，但将 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 中需要。这是一个更新的 fiddle ，它以更好的方式存储颜色:

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

如果将 colors.blue 更改为 colors.red，您会发现可以轻松地在不同颜色之间切换，而且语法是 javascript 的原生语法。