首頁(yè) 猿問(wèn) jQuery -...

jQuery - 不可見(jiàn)時(shí)獲取元素寬度（顯示：無(wú)）

JQuery

明月笑刀無(wú)情 2019-08-02 14:29:14

jQuery - 不可見(jiàn)時(shí)獲取元素寬度（顯示：無(wú)）似乎在jQuery中，當(dāng)元素不可見(jiàn)時(shí)，width（）返回0.有道理，但我需要獲取表的寬度，以便在顯示父級(jí)之前設(shè)置父級(jí)的寬度。如下所述，父母中有文本，使父母傾斜并且看起來(lái)很討厭。我希望父級(jí)只有表格的寬度并且包含文本。<div id="parent"> Text here ... Can get very long and skew the parent <table> ... </table> Text here too ... which is why I want to shrink the parent based on the table</div>CSS：#parent{ display: none;}使用Javascript：var tableWidth = $('#parent').children('table').outerWidth();if (tableWidth > $('#parent').width()){ $('#parent').width(tableWidth);}tableWidth總是返回0，因?yàn)樗豢梢?jiàn)（我猜是因?yàn)樗诳梢?jiàn)時(shí)給了我一個(gè)數(shù)字）。有沒(méi)有辦法獲得表格的寬度而不使父母可見(jiàn)？

查看完整描述

3 回答

湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

function realWidth(obj){
    var clone = obj.clone();
    clone.css("visibility","hidden");
    $('body').append(clone);
    var width = clone.outerWidth();
    clone.remove();
    return width;}realWidth($("#parent").find("table:first"));

反對(duì) 回復(fù) 2019-08-02

阿晨1998

TA貢獻(xiàn)2037條經(jīng)驗(yàn) 獲得超6個(gè)贊

根據(jù)羅伯茨的回答，這是我的功能。如果元素或其父元素已經(jīng)通過(guò)jQuery淡出，這對(duì)我有用，可以獲得內(nèi)部或外部維度，也可以返回偏移值。

/ edit1：重寫(xiě)了這個(gè)函數(shù)。它現(xiàn)在變小了，可以直接在對(duì)象上調(diào)用

/ edit2：該函數(shù)現(xiàn)在將在原始元素而不是正文之后插入克隆，從而使克隆可以維護(hù)繼承的維度。

$.fn.getRealDimensions = function (outer) {
    var $this = $(this);
    if ($this.length == 0) {
        return false;
    }
    var $clone = $this.clone()
        .show()
        .css('visibility','hidden')
        .insertAfter($this);        
    var result = {
        width:      (outer) ? $clone.outerWidth() : $clone.innerWidth(), 
        height:     (outer) ? $clone.outerHeight() : $clone.innerHeight(), 
        offsetTop:  $clone.offset().top, 
        offsetLeft: $clone.offset().left    };
    $clone.remove();
    return result;}var dimensions = $('.hidden').getRealDimensions();

反對(duì) 回復(fù) 2019-08-02