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中需要。这是一个更新的小提琴，以更好的方式存储颜色：

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

如果您将colors.blue更改为colors.red，您会发现可以轻松地在不同颜色之间切换，并且语法仍然适用于javascript。

使用d3js获取css类的特定值

1 个答案: