CSS 等价于 .attr("data-html", "true")答案

【问题标题】：CSS equivalent to .attr("data-html", "true")CSS 等价于 .attr("data-html", "true")
【发布时间】：2017-01-17 07:31:15
【问题描述】：

跟进 line break for d3 circle title tooltipText

代码是

svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name");
 var tooltipText = node.attr("name").replace("\\n", "<br />"); 
 if (tooltipText) {
   node.select("circle")
     .attr("data-html", "true")
     .attr("title", tooltipText);
 }

我想用 CSS 格式替换 .attr("data-html", "true") 函数

css，不工作-1：

# g.node circle { data-html: true;}

css，不工作-2：

# g.node circle { html: true;}

以上2个都有“未知属性名”错误。

我想知道，.attr("data-html", "true") 等价的 CSS 是什么？

非常感谢。

【问题讨论】：

data-html 是一个属性，而不是 CSS 属性

标签： javascript jquery html css d3.js

【解决方案1】：

CSS 是（设计用于）一种向 HTML 文档添加样式的简单机制。

您提到的代码实际上改变了 DOM（在本例中为 html 节点）。

附带说明：如果您想根据 CSS 中的状态“选择”，您可以这样做。

html {
  background: red;
}

html[data-something=true] {
  background: green;
}

如果 JavaScript 设置 $('html').attr('data-something', 'true'); 您的 CSS 将被应用（从红色背景变为绿色）。

【讨论】：

【解决方案2】：

它没有等效的CSS 属性。 CSS 是外观和一些行为。 data-html 是 HTML5 样式属性，用于存储数据。您可以添加任何带有 data- 前缀的内容。

所以你需要使用Javascript 来添加HTML5 属性。

【讨论】：