用一个虚构的CSS属性检索要素

Question

可能重复：
Can I fetch the value of a non-standard CSS property via Javascript?

如何使用jQuery来检索与虚构的或非标准的CSS属性的所有元素？例如，如果属性是“情绪”并且其值为“开心”，那么我如何遍历该dom并检索具有该属性的元素，并且如果有必要，它是值？

HTML ...

<div class="book"> 
</div> 

CSS ..

.book { 
emotion:happy; 
} 

使用Javascript/jQuery的查询由具有情感属性，它找的书。

??? 

谢谢！

Answer 1

的人向我提到一个解决办法有人使用CSS解析器，如：http://glazman.org/JSCSSP/index.html

Answer 2

无效或未知的CSS属性（不属性）将被浏览器忽略，并且无法访问它们，因为它们未添加到DOM。

Answer 3

您要使用的数据属性在这里：

<div class="book" data-emotion="happy"></div> 

和使用jQuery获得为：

$('.book[data-emotion="happy"]'); 

Answer 4

你可以与DOM中的任意属性的元素：

​<div emotion="happy">:)</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​ 
... 
console.log(​$('div[emotion="happy"]').text()​​​​​​​​​​​​​​​​​​​​​);​ 
// prints ":)" 

...但最好这样做：

​<div data-emotion="happy">:)</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​ 
... 
console.log(​$('div[data-emotion="happy"]').text()​​​​​​​​​​​​​​​​​​​​​);​ 
// prints ":)" 

因为使用data- user-defined attributes is recommended in HTML5。

它也不会被解析为CSS规则，您为什么要这么做？

Answer 5

虽然我想你可以/基于CSS属性不应该被搜索的元素：

休息我希望它可以帮助事业:)

PLZ试试这个：

var x = $('div').filter(function(){ return this.style.some_prop == 'whatever' }); 
                 ^------- ------^

注意：如果你想搜索相关属性，请看这里

$(parentElement).find('*[someAttributeName]').each(function(index){ 
    doSomething(this); 
});