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属性（ not attributes ），并且无法访问它们，因为它们未添加到DOM中。

Answer 2

您想要使用数据属性，如下所示：

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

并使用jQuery：

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

Answer 3

您可以在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 4

虽然我认为你可以/不应该根据css属性搜索元素：

休息我希望它有助于事业:)

请试试这个：

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

注意：如果您想要搜索属性，请参阅此处

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

Answer 5

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

使用伪造的CSS属性检索元素

5 个答案: