Html CSS - 使用数据属性添加颜色 - attr(data-color color)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27529374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Add Color with a data attribute - attr(data-color color)
提问by Zagloo
I'm trying to add color to different element with a data attribute in my css but doensn't work ...
我试图在我的 css 中使用 data 属性为不同的元素添加颜色，但不起作用...
I follow this instructions :
我按照这个说明：
The attr() Function: Properties Values Collected from the Edited Document.
HTML
HTML
<table>
<tr>
<td>
<span class="bgborder" data-color="#e7663f"></span>
<i class="fa fa-copy"></i>
</td>
<td>
<span>Blaablaaablaaa</span>
</td>
</tr>
</table>
<table>
<tr>
<td>
<span class="bgborder" data-color="#77c385"></span>
<i class="fa fa-upload fa-fw"></i>
</td>
<td>
<span>Blablaablaaa</span>
</td>
</tr>
</table>
CSS
CSS
.bgborder {
display: block;
width: 5px;
height: 100%;
position: absolute;
top: 0;
background-color: attr(data-color color);
}
Nothing appears...Am I right ?
什么都没有出现……我说得对吗？
In my chrome inspector I have this :
在我的 chrome 检查器中，我有这个：
background-color: attr(data-color color);
/!\ Invalid property value
I don't understand why... ???
我不明白为什么......？
Thanks for your help :)
谢谢你的帮助 ：）
回答by Niet the Dark Absol
Always a good idea to read the documentation: https://developer.mozilla.org/en/docs/Web/CSS/attr
阅读文档总是一个好主意：https: //developer.mozilla.org/en/docs/Web/CSS/attr
Surprise! If nothing supports it, then it won't work ;)
惊喜！如果没有任何东西支持它，那么它就行不通；)
Alternative: If you know you only have a limited range of colours, try:
替代方案：如果您知道自己只有有限的颜色范围，请尝试：
[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:blue !important}
[data-color=zophan-blue] {background-color:#33ccff !important}
As you can see, this allows flexibility, such as defining your own colours ;)
如您所见，这提供了灵活性，例如定义您自己的颜色；)
回答by Treeskar
If you are talking only about colors, you can use currentColor value as a proxy.
如果您只讨论颜色，则可以使用 currentColor 值作为代理。
For example:
例如：
HTML
HTML
<td>
<span class="bgborder" style="color: #e7663f"></span>
<i class="fa fa-copy"></i>
</td>
CSS
CSS
.bgborder {
background-color: currentColor;
}
回答by Romain Norberg
You can pass css values from html:
您可以从 html 传递 css 值：
<button style="
--tooltip-string: 'Ug. Tooltips.';
--tooltip-color: #f06d06;
--tooltip-font-size: 11px;
--tooltip-top: -10px">
Button
</button>
to css:
到CSS：
button::after {
content: var(--tooltip-string);
color: var(--tooltip-color);
font-size: var(--tooltip-font-size);
}
source: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/codepen: https://codepen.io/chriscoyier/pen/EbxVME
来源：https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ codepen：https: //codepen.io/chriscoyier/pen/EbxVME
回答by SW4
Currently, the CSS attrfunction can only be used with the contentproperty in browsers
目前，CSSattr功能只能与content浏览器中的属性一起使用
Per the CSS2 spec:
根据 CSS2 规范：
Limited to the content property
仅限于内容属性
CSS3 will extend this (proposal)
CSS3 将扩展这个（提案）
..can be used on all properties; may return other values than
<string>
..可用于所有属性；可能返回其他值
<string>
回答by Alessander Fran?a
回答by Mark Langford
alternately a very handy bit of javascript:
或者一个非常方便的javascript：
<P _my_colour="red" >one</P>
<P _my_colour="blue">two</P>
<P _my_colour="green">three</P>
<script>
var my_col = document.querySelectorAll("[_my_colour]");
my_col.forEach(element => {
element.style.color = element.getAttribute("_my_colour");
})
</script>
The css solutions outlined by other contributors are generally better and simpler, so a JS solution is somewhat reinventing the wheel, but does do explicitly what you want in the question, so it's here for completeness.
其他贡献者概述的 css 解决方案通常更好、更简单，因此 JS 解决方案在某种程度上是重新发明轮子，但确实明确地在问题中执行了您想要的操作，因此这里是为了完整性。
