我试图在我的 css 中为具有数据属性的不同元素添加颜色,但不起作用 ...
我遵循以下说明:
The attr() Function: Properties Values Collected from the Edited Document.
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
.bgborder {
display: block;
width: 5px;
height: 100%;
position: absolute;
top: 0;
background-color: attr(data-color color);
}
什么都没有出现...我说得对吗?
在我的 chrome 检查器中我有这个:
background-color: attr(data-color color);
/!\ Invalid property value
我不明白为什么...???
感谢您的帮助:)
最佳答案
您可以从 html 传递 css 值:
<button style="
--tooltip-string: 'Ug. Tooltips.';
--tooltip-color: #f06d06;
--tooltip-font-size: 11px;
--tooltip-top: -10px">
Button
</button>
到 CSS:
button::after {
content: var(--tooltip-string);
color: var(--tooltip-color);
font-size: var(--tooltip-font-size);
}
来源:https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ 代码笔:https://codepen.io/chriscoyier/pen/EbxVME
关于html - CSS - 使用数据属性添加颜色 - attr(data-color color),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27529374/