jQuery: รับส่วนสูงขององค์ประกอบที่ซ่อนอยู่ใน jQuery

ฉันต้องได้ความสูงขององค์ประกอบที่อยู่ใน div ที่ถูกซ่อนอยู่ ตอนนี้ฉันแสดง div รับส่วนสูงและซ่อน div parent มันดูโง่ไปหน่อย มีวิธีที่ดีกว่า?

ฉันใช้ jQuery 1.4.2:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

คุณสามารถทำอะไรแบบนี้แฮ็กไปหน่อยลืมไปpositionเลยว่ามันสมบูรณ์แล้ว:

var previousCss  = $("#myDiv").attr("style");

$("#myDiv").css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

ฉันพบปัญหาเดียวกันกับการซ่อนความกว้างขององค์ประกอบดังนั้นฉันจึงเขียนปลั๊กอินนี้เรียกjQuery Actualเพื่อแก้ไข แทนที่จะใช้

$('#some-element').height();

ใช้

$('#some-element').actual('height');

จะให้ค่าที่ถูกต้องสำหรับองค์ประกอบที่ซ่อนอยู่หรือองค์ประกอบที่มีผู้ปกครองที่ซ่อนอยู่

เอกสารฉบับเต็มโปรดดูที่นี่ นอกจากนี้ยังมีการสาธิตรวมอยู่ในหน้า

หวังว่าความช่วยเหลือนี้ :)

คุณกำลัง confuising สองรูปแบบ CSS ที่รูปแบบการแสดงและรูปแบบการแสดงผล

ถ้าองค์ประกอบจะถูกซ่อนไว้โดยการตั้งค่ารูปแบบการแสดงผล CSS แล้วคุณควรจะสามารถที่จะได้รับความสูงโดยไม่คำนึงถึงหรือไม่ว่าองค์ประกอบที่จะมองเห็นได้หรือไม่เป็นองค์ประกอบยังคงใช้พื้นที่บนหน้าเว็บ

หากองค์ประกอบถูกซ่อนไว้โดยการเปลี่ยนสไตล์การแสดงผล css เป็น "none" องค์ประกอบนั้นจะไม่ใช้พื้นที่ในหน้าและคุณจะต้องให้รูปแบบการแสดงผลซึ่งจะทำให้องค์ประกอบการแสดงผลในบางพื้นที่ที่ จุดไหนคุณจะได้ส่วนสูง

จริง ๆ แล้วฉันเคยใช้กลอุบายเพื่อจัดการกับเรื่องนี้ในบางครั้ง ฉันพัฒนาวิดเจ็ตแถบเลื่อน jQuery ซึ่งฉันพบปัญหาที่ฉันไม่ทราบล่วงหน้าหากเนื้อหาที่เลื่อนได้เป็นส่วนหนึ่งของมาร์กอัปที่ซ่อนอยู่หรือไม่ นี่คือสิ่งที่ฉันทำ:

// try to grab the height of the elem
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// if height is zero, then we're dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

ส่วนใหญ่ใช้งานได้ แต่มีปัญหาชัดเจนที่อาจเกิดขึ้นได้ หากเนื้อหาที่คุณโคลนนั้นมีสไตล์ด้วย CSS ที่มีการอ้างอิงถึงมาร์กอัปแม่แบบในกฎของพวกเขาเนื้อหาที่โคลนจะไม่มีสไตล์ที่เหมาะสมและอาจมีการวัดที่แตกต่างกันเล็กน้อย ในการหลีกเลี่ยงสิ่งนี้คุณสามารถตรวจสอบให้แน่ใจว่ามาร์กอัปที่คุณโคลนนั้นมีการใช้กฎ CSS ที่ไม่รวมการอ้างอิงถึงมาร์กอัปหลัก

นอกจากนี้สิ่งนี้ไม่ได้เกิดขึ้นกับฉันด้วยวิดเจ็ต scroller ของฉัน แต่เพื่อให้ได้ความสูงที่เหมาะสมขององค์ประกอบโคลนคุณจะต้องตั้งค่าความกว้างเป็นความกว้างเดียวกันขององค์ประกอบหลัก ในกรณีของฉันความกว้างของ CSS ถูกนำไปใช้กับองค์ประกอบจริงเสมอดังนั้นฉันไม่ต้องกังวลเกี่ยวกับสิ่งนี้อย่างไรก็ตามหากองค์ประกอบนั้นไม่มีความกว้างที่ใช้กับมันคุณอาจต้องเรียกใช้ซ้ำ การแวะผ่านของบรรพบุรุษ DOM ขององค์ประกอบเพื่อค้นหาความกว้างขององค์ประกอบหลักที่เหมาะสม

สร้างเพิ่มเติมจากคำตอบของผู้ใช้ Nick และปลั๊กอิน hitautodestruct ของผู้ใช้บน JSBin ฉันได้สร้างปลั๊กอิน jQuery ที่คล้ายกันซึ่งดึงทั้งความกว้างและความสูงและส่งคืนวัตถุที่มีค่าเหล่านี้

พบได้ที่นี่: http://jsbin.com/ikogez/3/

ปรับปรุง

ฉันได้ออกแบบปลั๊กอินตัวเล็ก ๆ ตัวนี้ขึ้นมาใหม่อย่างสมบูรณ์เนื่องจากมันกลับกลายเป็นว่าเวอร์ชั่นก่อนหน้า (ดังกล่าวข้างต้น) ไม่สามารถใช้งานได้จริงในสภาพแวดล้อมในชีวิตจริงที่มีการจัดการ DOM เกิดขึ้นมากมาย

มันทำงานได้อย่างสมบูรณ์แบบ:

/**
 * getSize plugin
 * This plugin can be used to get the width and height from hidden elements in the DOM.
 * It can be used on a jQuery element and will retun an object containing the width
 * and height of that element.
 *
 * Discussed at StackOverflow:
 * http://stackoverflow.com/a/8839261/1146033
 *
 * @author Robin van Baalen <robin@neverwoods.com>
 * @version 1.1
 * 
 * CHANGELOG
 *  1.0 - Initial release
 *  1.1 - Completely revamped internal logic to be compatible with javascript-intense environments
 *
 * @return {object} The returned object is a native javascript object
 *                  (not jQuery, and therefore not chainable!!) that
 *                  contains the width and height of the given element.
 */
$.fn.getSize = function() {    
    var $wrap = $("<div />").appendTo($("body"));
    $wrap.css({
        "position":   "absolute !important",
        "visibility": "hidden !important",
        "display":    "block !important"
    });

    $clone = $(this).clone().appendTo($wrap);

    sizes = {
        "width": $clone.width(),
        "height": $clone.height()
    };

    $wrap.remove();

    return sizes;
};

สร้างเพิ่มเติมจากคำตอบของ Nick:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

ฉันพบว่าการทำเช่นนี้ดีกว่า:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

การตั้งค่าแอตทริบิวต์ CSS จะแทรกแบบอินไลน์ซึ่งจะเขียนทับคุณลักษณะอื่น ๆ ที่คุณมีในไฟล์ CSS ของคุณ โดยการลบคุณลักษณะสไตล์ในองค์ประกอบ HTML ทุกอย่างกลับสู่ปกติและยังคงซ่อนอยู่เนื่องจากถูกซ่อนตั้งแต่แรก

นอกจากนี้คุณยังสามารถวางตำแหน่ง div ที่ซ่อนอยู่บนหน้าจอด้วยระยะขอบลบแทนที่จะใช้การแสดงผล: ไม่มีเหมือนเทคนิคการแทนที่รูปภาพเยื้องข้อความ

เช่น.

position:absolute;
left:  -2000px;
top: 0;

วิธีนี้ความสูง () ยังคงมีอยู่

ฉันพยายามหาฟังก์ชั่นการทำงานสำหรับองค์ประกอบที่ซ่อนอยู่ แต่ฉันรู้ว่า CSS นั้นซับซ้อนกว่าทุกคนคิด มีเทคนิคเลย์เอาต์ใหม่มากมายใน CSS3 ที่อาจไม่สามารถใช้ได้กับคำตอบก่อนหน้านี้ทั้งหมดเช่นกล่องแบบยืดหยุ่นตารางคอลัมน์หรือแม้แต่องค์ประกอบภายในองค์ประกอบหลักที่ซับซ้อน

ตัวอย่าง flexibox

ผมคิดว่าเพียงการแก้ปัญหาอย่างยั่งยืนและง่ายๆคือการแสดงผลแบบ real-time ในขณะที่เบราว์เซอร์ควรให้คุณทราบว่าขนาดขององค์ประกอบที่ถูกต้อง

น่าเศร้าที่ JavaScript ไม่ได้จัดให้มีเหตุการณ์โดยตรงใด ๆ ที่จะแจ้งเตือนเมื่อองค์ประกอบถูกแสดงหรือซ่อน อย่างไรก็ตามฉันสร้างฟังก์ชั่นบางอย่างจาก DOM Attribute API ที่แก้ไขแล้วซึ่งจะเรียกใช้ฟังก์ชันการโทรกลับเมื่อมีการเปลี่ยนแปลงองค์ประกอบที่มองเห็นได้

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

สำหรับข้อมูลเพิ่มเติมกรุณาเยี่ยมชมที่โครงการของฉัน GitHub

https://github.com/Soul-Master/visible.event.js

ตัวอย่าง: http://jsbin.com/ETiGIre/7

การติดตามโซลูชันของ Nick Craver การตั้งค่าการมองเห็นขององค์ประกอบช่วยให้ได้มิติที่ถูกต้อง ฉันใช้วิธีนี้บ่อยมาก อย่างไรก็ตามเมื่อต้องรีเซ็ตสไตล์ด้วยตนเองฉันพบว่ามันยุ่งยากเนื่องจากการแก้ไขตำแหน่งเริ่มต้น / การแสดงองค์ประกอบใน CSS ของฉันผ่านการพัฒนาฉันมักจะลืมปรับปรุงจาวาสคริปต์ที่เกี่ยวข้อง รหัสต่อไปนี้ไม่ได้รีเซ็ตรูปแบบต่อคำพูด แต่จะลบรูปแบบอินไลน์ที่เพิ่มโดยจาวาสคริปต์:

$("#myDiv")
.css({
    position:   'absolute',
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();

$("#myDiv").attr('style', '');

ข้อสันนิษฐานเดียวที่นี่คือไม่สามารถมีสไตล์อินไลน์อื่น ๆ มิฉะนั้นพวกเขาจะถูกลบออกเช่นกัน อย่างไรก็ตามประโยชน์ที่นี่คือรูปแบบขององค์ประกอบจะกลับไปเป็นสิ่งที่พวกเขาอยู่ในสไตล์ชีท CSS ดังนั้นคุณสามารถเขียนสิ่งนี้ขึ้นเป็นฟังก์ชั่นที่องค์ประกอบถูกส่งผ่านและความสูงหรือความกว้างจะถูกส่งกลับ

อีกปัญหาที่ฉันได้พบในการตั้งค่าสไตล์แบบอินไลน์ผ่าน js คือเมื่อต้องรับมือกับการเปลี่ยนผ่าน css3 คุณจะถูกบังคับให้ปรับน้ำหนักกฎของสไตล์ของคุณให้แข็งแกร่งกว่าแบบอินไลน์ซึ่งอาจทำให้หงุดหงิดในบางครั้ง

ตามคำนิยามองค์ประกอบจะมีความสูงก็ต่อเมื่อสามารถมองเห็นได้

แค่อยากรู้: ทำไมคุณถึงต้องการความสูงขององค์ประกอบที่ซ่อนอยู่

ทางเลือกหนึ่งคือการซ่อนองค์ประกอบอย่างมีประสิทธิภาพโดยวางไว้ด้านหลัง (โดยใช้ดัชนี z) การซ้อนทับบางชนิด)

ในกรณีของฉันฉันยังมีองค์ประกอบที่ซ่อนอยู่หยุดฉันจากการรับค่าความสูง แต่มันไม่ได้เป็นองค์ประกอบเอง แต่เป็นหนึ่งในนั้นคือพ่อแม่ ... ดังนั้นฉันแค่ใส่เช็คปลั๊กอินของฉันเพื่อดูว่ามันเป็นอย่างไร ซ่อนไว้มิฉะนั้นจะพบองค์ประกอบที่ซ่อนอยู่ใกล้เคียงที่สุด นี่คือตัวอย่าง:

var $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    //if the main element itself isn't hidden then roll through the parents
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

ในความเป็นจริงนี่คือการรวมกันของการตอบสนองของ Nick, Gregory และ Eyelidlessness เพื่อให้คุณใช้วิธีการที่พัฒนาขึ้นของ Gregory แต่ใช้ทั้งสองวิธีในกรณีที่ควรจะมีบางสิ่งบางอย่างในแอตทริบิวต์ลักษณะที่คุณต้องการนำกลับมาและมองหา องค์ประกอบหลัก

สิ่งเดียวที่ฉันทำได้กับโซลูชันของฉันคือการวนลูปผ่านพ่อแม่ไม่ได้มีประสิทธิภาพทั้งหมด

วิธีแก้ปัญหาหนึ่งคือการสร้าง div parent นอกองค์ประกอบที่คุณต้องการให้ได้ความสูงใช้ความสูงเป็น '0' และซ่อนโอเวอร์โฟลว์ใด ๆ ถัดไปรับความสูงขององค์ประกอบลูกและลบคุณสมบัติโอเวอร์โฟลว์ของพาเรนต์

var height = $("#child").height();
// Do something here
$("#parent").append(height).removeClass("overflow-y-hidden");

.overflow-y-hidden {
  height: 0px;
  overflow-y: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent" class="overflow-y-hidden">
  <div id="child">
    This is some content I would like to get the height of!
  </div>
</div>

นี่คือสคริปต์ที่ฉันเขียนเพื่อจัดการกับมิติทั้งหมดของ jQuery สำหรับองค์ประกอบที่ซ่อนอยู่แม้กระทั่งลูกหลานของผู้ปกครองที่ซ่อนอยู่ โปรดทราบว่ามีการใช้งานสิ่งนี้อย่างมีประสิทธิภาพ

// Correctly calculate dimensions of hidden elements
(function($) {
    var originals = {},
        keys = [
            'width',
            'height',
            'innerWidth',
            'innerHeight',
            'outerWidth',
            'outerHeight',
            'offset',
            'scrollTop',
            'scrollLeft'
        ],
        isVisible = function(el) {
            el = $(el);
            el.data('hidden', []);

            var visible = true,
                parents = el.parents(),
                hiddenData = el.data('hidden');

            if(!el.is(':visible')) {
                visible = false;
                hiddenData[hiddenData.length] = el;
            }

            parents.each(function(i, parent) {
                parent = $(parent);
                if(!parent.is(':visible')) {
                    visible = false;
                    hiddenData[hiddenData.length] = parent;
                }
            });
            return visible;
        };

    $.each(keys, function(i, dimension) {
        originals[dimension] = $.fn[dimension];

        $.fn[dimension] = function(size) {
            var el = $(this[0]);

            if(
                (
                    size !== undefined &&
                    !(
                        (dimension == 'outerHeight' || 
                            dimension == 'outerWidth') &&
                        (size === true || size === false)
                    )
                ) ||
                isVisible(el)
            ) {
                return originals[dimension].call(this, size);
            }

            var hiddenData = el.data('hidden'),
                topHidden = hiddenData[hiddenData.length - 1],
                topHiddenClone = topHidden.clone(true),
                topHiddenDescendants = topHidden.find('*').andSelf(),
                topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(),
                elIndex = topHiddenDescendants.index(el[0]),
                clone = topHiddenCloneDescendants[elIndex],
                ret;

            $.each(hiddenData, function(i, hidden) {
                var index = topHiddenDescendants.index(hidden);
                $(topHiddenCloneDescendants[index]).show();
            });
            topHidden.before(topHiddenClone);

            if(dimension == 'outerHeight' || dimension == 'outerWidth') {
                ret = $(clone)[dimension](size ? true : false);
            } else {
                ret = $(clone)[dimension]();
            }

            topHiddenClone.remove();
            return ret;
        };
    });
})(jQuery);

หากคุณเคยแสดงองค์ประกอบในหน้าก่อนหน้านี้คุณสามารถดึงความสูงได้โดยตรงจากองค์ประกอบ DOM (สามารถเข้าถึงได้ใน jQuery ด้วย. get (0)) เนื่องจากมีการตั้งค่าแม้ว่าองค์ประกอบจะถูกซ่อนอยู่:

$('.hidden-element').get(0).height;

สำหรับความกว้างเดียวกัน:

$('.hidden-element').get(0).width;

(ขอบคุณ Skeets O'Reilly สำหรับการแก้ไข)