CSS属性的值

width: attr(data-width);

我想知道是否有任何方式有可能使用HTML5的data-属性，您可以设置CSS content同样的方法设置CSS值。目前它不起作用。CSS属性的值

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }

来源

2012-03-01 James Kyle

AFAIK你不能只使用CSS。尽管使用JavaScript是完全可能的。 – David 2012-03-01 20:07:42

从语义上讲，这是一个坏主意，因为它打破了标记和布局的分离。 – 2012-03-01 20:08:02

您需要找到一个更好的示例，因为上述问题的解决方案使用的是

而不是

。目前我只能想象你的问题在属性选择器方面很有趣：http://css-tricks.com/attribute-selectors/ – 2012-03-01 20:14:13

什么就有什么，事实上，预知了这样的特征，看http://www.w3.org/TR/css3-values/#attr-notation

这fiddle应该像你需要什么，但会现在不行。

不幸的是，它仍然是一个草稿，并没有完全在主流浏览器上实现。

尽管如此，它对content仍然适用于伪元素。

来源

2012-08-08 18:25:31

是这种css语法'content：attr（data-content）;'跨浏览器？它工作到IE8？ – axel 2015-06-22 11:37:39

更新 - 现在这是浏览器中可用的功能。 – 2016-11-16 15:28:50

@CaptainHypertext根据'caniuse.com'，这个函数仍然不被支持（除了伪元素的content属性中的字符串）。 http://caniuse.com/#feat=css3-attr – ne1410s 2016-11-25 08:58:28

理论上是的，有属性选择，但我没有测试过这一点。尝试：

[data-width="600px"] { 
width: 600px; 
}

http://www.w3.org/TR/CSS2/selector.html#matching-attrs应该帮助你得到你想要

来源

2012-03-01 20:13:25 frank

+10

我想OP的意思是说他不想硬编码像600px这样的东西。 – 2012-03-01 20:14:49

当然，我认为他们只是试图得到他们想要的外观明智的......在使用css来做它之前，因此这个问题... – frank 2012-03-02 10:13:13

我用它来隐藏第三方脚本中的一个按钮（ Shareaholic）。下面的按钮在移动设备上溢出，所以我使用[data-service =“google_plus”] {display：none}删除了其中的几个按钮： – costumingdiary 2016-03-22 14:15:52

您可以用JavaScript创建一些CSS- rules，您可以在您的样式后使用：http://jsfiddle.net/ARTsinn/vKbda/

var addRule = (function (sheet) { 
    if(!sheet) return; 
    return function (selector, styles) { 
     if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length); 
     if (sheet.addRule) return sheet.addRule(selector, styles); 
    } 
}(document.styleSheets[document.styleSheets.length - 1])); 

var i = 101; 
while (i--) { 
    addRule("[data-width='" + i + "%']", "width:" + i + "%"); 
}

这将创建100伪选择这样的：

[data-width='1%'] { width: 1%; } 
[data-width='2%'] { width: 2%; } 
[data-width='3%'] { width: 3%; } 
... 
[data-width='100%'] { width: 100%; }

注：这有点偏离主题，而不是你（或某人）想要的东西，但也许有帮助。

来源

2013-06-05 19:58:19 yckart

遗漏的类型错误：1172 在main.js：1179 （匿名）@ main.js：1172 （匿名）@ main.js：1179 09:02在main.js无法读取空的特性 '长度' ：48.363 – 2017-08-27 06:05:13

截至今天，您可以从CSS3声明中的HTML5 data属性中读取一些值。在CaioToOn's fiddle中，CSS代码可以使用data属性来设置content。

不幸的是，它不适用于width和height（在Google Chrome 35，Mozilla Firefox 30 & Internet Explorer 11中测试过）。

但有一个来自Fabrice Weinberg的CSS3 attr() Polyfill，它为data-width和提供支持。你可以在这里找到它的GitHub仓库：cssattr.js。

来源

2014-07-14 10:46:36

回答

相关问题