Question

我有4张不同的div图片缩略图。对于缩略图单击，我创建了一个jQuery脚本来放大图像。放大图片适用于第一页#C1，但剩余页面outerWidth返回0.因此放大图像未按预期显示。 CSS中的类集合列设置为display: none。单击下拉菜单，我使用fadeOut()隐藏其所有兄弟，并显示当前的＃（href属性）。我无法使用visibility:hidden，因为它完全隐藏了页面。

如何将outerWidth()功能用于所有其他页面。

<div class="collection-column" id = "#c1">....</div>
<div class="collection-column" id = "#c2">....</div>
<div class="collection-column" id = "#c3">....</div>
<div class="collection-column" id = "#c4">....</div>

有没有人面对类似的问题？请帮忙!!

Answer 1

有关此问题的解决方法是将位置设置为绝对位置并将元素移动到不可见区域。然后获取它的尺寸并恢复原始位置。

var getStyle = function (el, prop) {
    if (typeof getComputedStyle !== 'undefined') {
        return getComputedStyle(el, null).getPropertyValue(prop);
    } else {
        return el.currentStyle[prop];
    }
}

var getOuterWidth = function(element){
   var originalDisplay = getStyle(element.get(0), "display");
   if(originalDisplay == "hidden"){
       var originalPos = getStyle(element.get(0), "position");
       var originalLeft = getStyle(element.get(0), "left");
       var originalTop = getStyle(element.get(0), "top");
       element.css({ top : -10000, left: -10000, position: "absolute", display: "block"  });
    }

    var outerWidth = element.outerWidth();

    if(originalDisplay == "hidden"){
        element.css({ top : originalTop, left: originalLeft, position: originalPosition, display: originalDisplay });
    }

    return outerWidth;
}

用法：

getOuterWidth($("#c4"));

当用于兄弟姐妹

1 个答案: