Question

我显示了一张图片（一个字母）。按其他字母按钮（change_letter功能）可以更改图像。每个字母都有不同的宽度（“I”为18px，“W”为35px）。我想将div中的所有字母居中并使用

margin-left:-width/2+"px"

为此。但是，我得到的宽度值始终是前一个图像的宽度值。因此，在我将字母从“W”（35px）更改为“I”（18px）后，“I”获得边距：-17.5px（W的），而不是-9px。

我想知道如何立即获得新图像的宽度。

change_letter: function(e) {
    var txt = $(e.target).text().toLowerCase();

    if (this.typeFace !==2) {
        $('#customlogo_layer2').attr('src',function(_,old_src){
        return old_src.replace(/_(\w)_/g,'_'+txt+'_');
        });

        $('#customlogo_layer3').attr('src',function(_,old_src){
        return old_src.replace(/_(\w)_/g,'_'+txt+'_');
        });

        var layer2img = document.getElementById('customlogo_layer2'); 
        var layer2width = layer2img.clientWidth;
        var layer3img = document.getElementById('customlogo_layer3'); 
        var layer3width = layer3img.clientWidth;

        $('#customlogo_layer2').css({"margin-left":-layer2width/2+"px","margin-right":-layer2width/2+"px"});
        $('#customlogo_layer3').css({"display":"block","margin-left":-layer3width/2+"px","margin-right":-layer3width/2+"px"});
        }
    else

Answer 1

嗨，我想当你得到图像宽度时，图像还没有加载

试试这个：

   $('#customlogo_layer2').load(function(){

      var layerWidth = $(this)[0].clientWidth;

      $(this).css({"margin-left":-layerWidth/2+"px","margin-right":-layerWidth/2+"px"});

   })

   $('#customlogo_layer3').load(function(){

      var layerWidth = $(this)[0].clientWidth;

      $(this).css({"display":"block","margin-left":-layerWidth/2+"px","margin-right":-layerWidth/2+"px"});

   }) 

   $('#customlogo_layer2').attr('src',function(_,old_src){
    return old_src.replace(/_(\w)_/g,'_'+txt+'_');
    });

    $('#customlogo_layer3').attr('src',function(_,old_src){
    return old_src.replace(/_(\w)_/g,'_'+txt+'_');
    });

Answer 2

您可以通过在查询中添加随机数

来使用jQuery刷新图像的src

$(imageobj).attr('src', $(imageobj)
       .attr('src') + '?' + Math.random() );

立即更新更改图像宽度

2 个答案: