0

我有一个 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/

提前致谢。

4

1 回答 1

0

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

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

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

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

接下来，添加您在问题中但不在 jsfiddle 中的 css 声明，但已更改fill为. 我还确保隐藏了包含颜色的 div，因此它不会干扰示例。background-colorcolor

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

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

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

这个函数只是根据你作为参数提供的类名抓取一个元素，然后抓取 .css 的 css 值color。您可以看到，如果您想获取另一个属性值，或者甚至将属性值作为第二个参数添加到函数中，则很容易进行交换color，但在此示例中我没有看到需要这样做。

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

编辑

OP 澄清说，他们正在寻找存储颜色值的最佳方法，并认为它将在 css 中。我会说这不是存储颜色值的最佳方式，并建议将它们存储在 javascript 中的对象中，因为它们仅在 javascript 中需要。这是一个更新的小提琴，它以更好的方式存储颜色：

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

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

于 2013-10-07T01:18:35.700 回答