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

Question

HTML 示例:

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

在这里，我希望将“data-style-top”属性设置为“20%”的 div 的 css 属性为 top:20%; 如果属性值为 50 % 那么 top 属性的值应该是 '50%'。

有什么方法可以实现吗？喜欢:

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

抱歉，如果我无法正确解释。我不擅长解释。

Answer 1

当心!浏览器支持可能不好。

在CSS Values and Units Module Level 3 (这是 currently 候选推荐)，attr() 的语法会是:

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

如果 data-style-top 属性没有值，您还可以提供后备值:

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

• data-style-top是要使用的HTML属性
• % 是要使用的 CSS 类型/单元
• 10 是回退 (= 10%)

---

注意 attr() is “存在风险，可能会在 CR 期间被丢弃”。

本周发布了新的 CR (2013-11-21)，无论出于何种原因，它是 not yet公开，除了Editor’s Draft命名空间。 attr() 仍然包含在内，但再次列为“有风险”。