0

我有 4 种不同div的图像缩略图。对于缩略图单击，我创建了一个 jQuery 脚本来放大图像。放大图像适用于第一页#C1，但其余页面outerWidth返回 0。因此，放大图像未按预期显示。display: noneCSS 中设置为的类 collection-column 。在单击下拉菜单时，我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>

有没有人遇到过类似的问题？请帮忙！！

4

1 回答 1

0

关于这个问题有一个解决方法，将位置设置为绝对位置并将元素移动到不可见区域。然后得到它的尺寸并恢复原来的位置。

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"));
于 2017-10-18T05:22:32.693 回答