快速选择所有带有css背景图片的元素

发布于 2024-10-16 20:38:32 字数 227 浏览 1 评论 0原文

我想抓取页面上具有 css 背景图像的所有元素。我可以通过过滤功能来做到这一点,但在包含许多元素的页面上它非常慢:

$('*').filter(function() {
    return ( $(this).css('background-image') !== '' );
}).addClass('bg_found');

是否有更快的方法来选择具有背景图像的元素?

I want to grab all elements on a page that have a css background-image. I can do this via a filter function, but it's very slow on a page with many elements:

$('*').filter(function() {
    return ( $(this).css('background-image') !== '' );
}).addClass('bg_found');

Is there any faster way to select elements with background images?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夜访吸血鬼 2024-10-23 20:38:32

如果您知道任何标签不会有背景图像,您可以改进选择,排除带有 非选择器(文档)

$('*:not(span,p)')

除此之外,您可以尝试在过滤器中使用更原生的 API 方法。

$('*').filter(function() {
    if (this.currentStyle) 
              return this.currentStyle['backgroundImage'] !== 'none';
    else if (window.getComputedStyle)
              return document.defaultView.getComputedStyle(this,null)
                             .getPropertyValue('background-image') !== 'none';
}).addClass('bg_found');

示例: http://jsfiddle.net/q63eU/

过滤器中的代码基于以下 getStyle 代码: http://www.quirksmode.org/dom/getstyles.html


发布 for 语句版本以避免 .filter() 中的函数调用。

var tags = document.getElementsByTagName('*'),
    el;

for (var i = 0, len = tags.length; i < len; i++) {
    el = tags[i];
    if (el.currentStyle) {
        if( el.currentStyle['backgroundImage'] !== 'none' ) 
            el.className += ' bg_found';
    }
    else if (window.getComputedStyle) {
        if( document.defaultView.getComputedStyle(el, null).getPropertyValue('background-image') !== 'none' ) 
            el.className += ' bg_found';
    }
}

If there are any tags that you know will not have a background image, you can improve the selection be excluding those with the not-selector(docs).

$('*:not(span,p)')

Aside from that, you could try using a more native API approach in the filter.

$('*').filter(function() {
    if (this.currentStyle) 
              return this.currentStyle['backgroundImage'] !== 'none';
    else if (window.getComputedStyle)
              return document.defaultView.getComputedStyle(this,null)
                             .getPropertyValue('background-image') !== 'none';
}).addClass('bg_found');

Example: http://jsfiddle.net/q63eU/

The code in the filter is based on the getStyle code from: http://www.quirksmode.org/dom/getstyles.html


Posting a for statement version to avoid the function calls in .filter().

var tags = document.getElementsByTagName('*'),
    el;

for (var i = 0, len = tags.length; i < len; i++) {
    el = tags[i];
    if (el.currentStyle) {
        if( el.currentStyle['backgroundImage'] !== 'none' ) 
            el.className += ' bg_found';
    }
    else if (window.getComputedStyle) {
        if( document.defaultView.getComputedStyle(el, null).getPropertyValue('background-image') !== 'none' ) 
            el.className += ' bg_found';
    }
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文