CSS3的attr()在主要浏览器中不起作用
我的HTML文档中包含以下内容：
<a class="wbutton tint" data-tint="rgba(255,0,0,.5)" href="#">This should be red, with an opacity of 0.5</a>CSS文件中包含以下内容：
.window > .content .wbutton.tint {
border: solid thin attr(data-tint, color);
box-shadow: inset 0 0 50px attr(data-tint, color);
}Firefox在Firebug中返回CSS错误。我做错了什么吗？
根据W3C specs for the attr() function的说法，它应该可以工作。
(此外，还有a page about attr() in the MDN Wiki，所以我认为它至少应该能在火狐中工作)
回答 4
Stack Overflow用户
发布于 2014-07-15 20:48:16
到目前为止，CSS3中的attr()只支持从HTML5 data属性获取值来设置元素的content。有一个很好的fiddle显示了这一点。
我已经在Google Chrome 35，Mozilla Firefox 30和Internet Explorer11上测试过了。
如果您希望将HTML5数据属性用于CSS3中的不同内容，如设置元素的width和height，则需要额外的JavaScript库。
Fabrice编写了一个处理data-width和data-height的CSS3 attr() Polyfill。您可以在这里找到Fabrice的GitHub存储库：cssattr.js。
Stack Overflow用户
发布于 2015-12-13 17:06:31
我找到hack了。这不是属性，而是直接在样式上操作。在Chrome Canary中，您可以使用自定义css属性，并使用JS来操作属性。
在CSS中：
.some { background-position: var(--x) 0; } 在JS中：
element.style.setProperty("--x", "100px", "");
//With same success you can set attribute. Stack Overflow用户
发布于 2018-04-11 01:50:18
它确实起作用了，但不是你想的那样。它不是一个通过变量发送的值，而更像是一个触发器，然后赋值给它。正因为如此，最好使数据属性具有唯一性但又简单。一个小例子可能会有所帮助：
<div class="data"><span data-width="80" data-tint="lime"></span></div>然后在你的css中放入：
.data {height: 50px; width: 100%; background-color: #eee;}
.data > span {display: block; height: 100%;}
.data > span[data-width="80"] {width: 80%;}
.data > span[data-tint="lime"] {background-color: rgba(118, 255, 3, 0.6);}如果你做的规模很小，但规模更大，在SCSS的帮助下，有些事情会变得更容易，比如..
@for $i from 1 through 100 {
&[data-width="#{$i}"] {
.data > span {
width: calc(#{$i} * 1%);
}
}
}这将编译成CSS的每一个百分比的可能性，允许您设置您的跨度宽度与数据宽度。
https://stackoverflow.com/questions/8769786
复制相似问题