将css属性的值设置为html属性的值

HTML示例：

<div data-style-top="20%">Hi, I'm not so high right now.</div>

---

对不起，如果我解释不清楚的话。我很难解释。

这里还有另一个解决方案：

小提琴：

带有一个for each和一个特定id的变量：

小心！浏览器支持可能不好

在（这是一个候选建议）中，的语法为：

div[data-style-top] {
  top: attr(data-style-top %);
}

如果

数据样式top

属性没有值，也可以提供回退值：

div[data-style-top] {
  top: attr(data-style-top %, 10);
}

• 数据样式top

  是要使用的HTML属性

• %

  是要使用的CSS类型/单位

• 10

  是回退（

  10%

  ）

---

请注意，

attr（）

本周发布了一个新的CR（2013-11-21），无论出于何种原因，除了名称空间之外，它是公共的
attr（）
仍然包括在内，但再次被列为“有风险”。
不能仅使用css，使用jquery
$（“[data style top]”）。data（'style-top
”）是否希望它适用于所有数据样式XXX属性？所以，如果它有数据样式width=“40px”，它也会认识到这一点吗？使用jQuery也可以，尽管比只使用top.TIL要困难一些，但对另一个属性使用
attr（）
值，而不是
content
是CSS3模块的一部分（目前），但不受支持（目前）。来源：（编辑：bugzilla中的评论说它应该在IE9+中工作。今天无法测试）
div[data-style-top] {
  top: attr(data-style-top %);
}

div[data-style-top] {
  top: attr(data-style-top %, 10);
}