Question

使用jQuery我怎么能看到div是否小于75px，如果它是1/2（半）加上左边填充的差异？

因此，如果图像是75px或更大，则没有任何反应，但如果它是71px则应用2px的左填充。

注意，大小由CSS定义，实际图像更大。

由于

以下内容对我不起作用：

$(window).load(function() {
    $(function(){ 
        var img= $('#views_slideshow_singleframe_pager_product_slideshow-node_content_1 .pager-item img');
        if(img.width() <75)
        {
            img.css("padding-left", (img.width() -75)/2);
    });
});

更新 - 我需要在页面上定位多个图像。

更新 - 我在本地添加代码建议，因此您无法看到它，但网站的非js版本在此处：link - 点击“SIZE”下方的缩略图之一在框中看到一个太小的缩略图。这个版本有点过时了，所以我上传后会立即回来更新版本。感谢

更新 - 缩略图图像本身是由javascript生成的，因此代码需要在创建后运行。我出于这个原因使用了窗口加载。

Answer 1

尝试这个jQuery，但我不确定它是多么容易出错：

$('img').live('click', function() {
  $.each($('img'), function() {
    var image = $(this);

    if (image.width() < 75) {
      image.css('padding-left', ((75 - image.width()) / 2)); 
    }
  });
});

编辑：每次点击任何图片时，系统都会触发此代码。您可以通过使用选择器查找特定容器中的单击图像（例如“div”）来使其更具体。

我希望它有所帮助 spryno724

Answer 2

从你的问题我不知道你是否想要确定div宽度或图像宽度，所以这应该适用于找到任何东西的宽度（只需将'img'更改为你要添加填充的任何内容）和然后将所需的值添加到左边填充。

$('img').each(function(){
    $self = $(this).width();
    if($self < 75){
        var diff = (75 - $self) / 2;
        $(this).css("padding-left", diff);
    }
});

更新（上面的内容可以用于div ...而不是图像）：

在我使用的浏览器（webkit）中，当jQuery要求时，不会设置图像的宽度。这导致宽度为0，因此代码为75，除以2，然后每次增加37.5。

这应该有效（使用图像的onload事件）：

var the_width, the_diff;
    $('img').each(function(){
        var img = $(this);
        $("<img/>").attr("src", $(img).attr("src")).load(function(){
            the_width = this.width;
            if(the_width < 75) {
                the_diff = (75 - the_width) / 2;
                img.css("padding-left", the_diff);
            }
        });
    });

jQuery - 如果图像宽度小于75px，则将差值加1/2作为填充？

2 个答案: