选择器-用于数据属性的api
选择器-用于数据属性的api
提问于 2010-04-19 12:56:57
在HTML5中，CSS选择器似乎可以很好地使用data-*属性。例如：
<style>
div[data-foo='bar'] {
background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>将正确地设置第一个的样式。但是，使用selectors-api选择这些元素的尝试失败了。示例：
var foos = document.querySelectorAll("div[data-foo]='bar'");或
var foos = document.querySelectorAll("div data-foo='bar'");在Chrome和Safari中，这会产生一个隐蔽的错误：
SYNTAX_ERR: DOM异常12
关于如何使用selectors-api根据data-*属性正确选择元素，您有什么想法吗？
回答 2
Stack Overflow用户
发布于 2010-04-19 13:58:28
属性选择器的语法是[att=val]，所以您需要div[data-foo='bar']。
Stack Overflow用户
发布于 2010-04-20 02:14:04
安妮是对的。(幸运的是，他是相关规范的编辑之一。)
<!DOCTYPE html>
<style>
div[data-foo='bar'] {
background:blue;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>
<script>
var foos = document.querySelectorAll("div[data-foo='bar']");
alert(foos[0])
</script>适用于我的是Firefox、Opera和Chrome。注意，它是CSS中使用的div[data-foo='bar']，而不是脚本中使用的div[data-foo]='bar'。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2665244
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号