Question

我想使用jquery来检测是否在元素的style属性中设置了图像背景，然后如果存在则确定图像的宽高比并将相关的类添加到元素中。

<article class="listing-article" style="background-image:
url('http://placehold.it/600x350/ff6600/fff');">
<div class="overlay"></div>
<div class="article-summary">
<h2 class="post-title post">Horizontal Background</h2>
<section class="article-excerpt">
<h3 class="subhead">Subhead</h3> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</section>
</div>
</article>

我在小提琴的js窗口中引用了一些相关的堆栈文章，但代码对于我的关卡来说太复杂了。

任何帮助都非常感激。

Answer 1

你可以尝试这样的事情 -

var backgroundImg = $('article.listing-article').css("background-image");

if (typeof(backgroundImg) != "undefined") {
    // background image present, do stuff here
}

Answer 2

这是jQuery做这样的事情。对这些部分进行了评论，以便于阅读：

$(document).ready(function() {
    // Loop through all the articles.
    $('.listing-article').each(function() {
        var $article = $(this);

        // Check if they have a background image.
        if ($article.css('background-image') !== 'none') {
            $article.addClass('bg-img');

            // Extract background url.
            var articleBG = $article.css('background-image').replace('url(','').replace(')','');

            // Load up the image to get its dimension.
            $('<img src="'+ articleBG +'"/>').load(function(){
                var imgWidth = this.width;
                var imgHeight = this.height;


                if (imgWidth === imgHeight) {
                    $article.addClass('bg-square');
                }
                else if (imgWidth > imgHeight) {
                    $article.addClass('bg-horizontal');
                }
                else {
                    $article.addClass('bg-vertical');
                }
            });
        }
        else {
            $article.addClass('bg-none');
        }

    });
});

http://jsfiddle.net/9ydHG/38/

检测背景图像属性，然后检测背景图像比例，添加相关类

2 个答案: