我的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,所以我认为它至少应该能在火狐中工作)
发布于 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。
发布于 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.
发布于 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
复制相似问题