jQuery: jQuery'de gizli öğenin yüksekliğini al

Gizli bir div içindeki bir öğenin yüksekliğini almam gerekiyor. Şu anda div'ı gösteriyorum, yüksekliği elde ediyorum ve üst div'ı gizliyorum. Bu biraz aptalca görünüyor. Daha iyi bir yol var mı?

JQuery 1.4.2 kullanıyorum:

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

Böyle bir şey yapabilirsin, ama biraz acayip, positionzaten mutlak olup olmadığını unutma :

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 : "");

Gizli eleman genişliği alma ile aynı sorunla karşılaştım, bu yüzden bu eklentiyi düzeltmek için jQuery Actual çağrısı yazdım . Kullanmak yerine

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

kullanım

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

gizli öğe için doğru değeri verir veya öğe gizli bir üst öğeye sahiptir.

Tam dokümantasyon için lütfen buraya bakınız . Ayrıca sayfada bir demo yer alıyor.

Umarım bu yardım :)

İki CSS stili, ekran stili ve görünürlük stili oluşturuyorsunuz .

Görünürlük css stilini ayarlayarak öğe gizlenmişse, öğe sayfada hala yer kapladığı için öğenin görünür olup olmadığına bakılmaksızın yüksekliği elde edebilmeniz gerekir .

Öğe, görüntü css stilini "none" olarak değiştirerek gizlenmişse, öğe sayfada yer kaplamaz ve öğeye bir alanda görüntülenmesine neden olacak bir görüntüleme stili vermeniz gerekir. hangi noktada, yüksekliği elde edebilirsiniz.

Aslında zaman zaman bununla başa çıkmak için biraz hileye başvurdum. Kaydırılabilir içerik, işaretlemenin gizli bir parçasının bir parçası olup olmadığı konusunda önceden bilmediğim bir sorunla karşılaştığım bir jQuery kaydırma çubuğu widget'ı geliştirdim. İşte yaptım:

// 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();
}

Bu çoğunlukla işe yarıyor, ancak potansiyel olarak ortaya çıkabilecek belirgin bir sorun var. Klonladığınız içerik, kurallarında üst işaretlemeye referanslar içeren CSS ile stilize edilmişse, klonlanmış içerik uygun stili içermez ve muhtemelen biraz farklı ölçümlere sahip olur. Bu sorunu aşmak için, klonladığınız biçimlendirmede üst biçimlendirmeye referans içermeyen CSS kurallarının uygulandığından emin olabilirsiniz.

Ayrıca, bu benim kaydırma aracımla gelmedi, ancak klonlanan öğenin uygun yüksekliğini elde etmek için genişliği ana öğenin aynı genişliğine ayarlamanız gerekir. Benim durumumda, bir CSS genişliği her zaman gerçek öğeye uygulandı, bu yüzden bunun için endişelenmem gerekmiyordu, ancak öğenin üzerine bir genişlik uygulanmadıysa, bir tür özyinelemeli yapmanız gerekebilir. uygun üst öğenin genişliğini bulmak için öğenin DOM ailesinin çapraz geçişi.

Kullanıcı Nick'in yanıtı ve JSBin kullanıcı hitautodestruct eklentisi üzerine daha fazla bina, hem genişlik hem de yüksekliği alıp bu değerleri içeren bir nesne döndüren benzer bir jQuery eklentisi oluşturdum.

Burada bulunabilir: http://jsbin.com/ikogez/3/

Güncelleme

Bu küçük küçük eklentiyi tamamen yeniden tasarladım, çünkü önceki sürümün (yukarıda belirtilen) çok fazla DOM manipülasyonunun gerçekleştiği gerçek yaşam ortamlarında gerçekten kullanılamadığı ortaya çıktı.

Mükemmel çalışıyor:

/**
 * 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'in cevabına daha fazla odaklanmak:

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

Bunu yapmanın daha iyi olduğunu gördüm:

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

CSS özniteliklerini ayarlamak, bunları satır içine ekler ve bu da CSS dosyanızdaki diğer özniteliklerin üzerine yazar. HTML öğesindeki stil niteliğini kaldırarak, her şey normale döner ve ilk başta gizlendiğinden hala gizlidir.

Gizli div'ı display kullanmak yerine negatif bir kenar boşluğu ile ekranın dışına da konumlandırabilirsiniz: yok, bir metin girintisi görüntü değiştirme tekniği gibi.

Örneğin.

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

Bu şekilde height () hala kullanılabilir.

Gizli eleman için çalışma fonksiyonu bulmaya çalışıyorum ama CSS'nin herkesin düşündüğünden çok daha karmaşık olduğunu anlıyorum. CSS3'te, karmaşık üst öğe içindeki esnek kutu, ızgara, sütun veya hatta öğe gibi önceki tüm yanıtlar için çalışmayabilecek birçok yeni düzen tekniği vardır.

flexibox örneği

Tek sürdürülebilir ve basit çözümün gerçek zamanlı renderleme olduğunu düşünüyorum . O zaman, tarayıcı size doğru eleman boyutunu vermelidir .

Ne yazık ki, JavaScript öğesi gösterildiğinde veya gizlendiğinde bildirimde bulunmak için doğrudan bir etkinlik sağlamaz. Ancak, öğenin görünürlüğü değiştiğinde geri arama işlevini yürütecek DOM Attribute Modified API'yi temel alan bazı işlevler oluşturuyorum.

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

    // render or adjust something
});

Daha fazla bilgi için, lütfen GitHub projemi ziyaret edin.

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

demo: http://jsbin.com/ETiGIre/7

Nick Craver'ın çözümünü takiben, elemanın görünürlüğünü ayarlamak doğru boyutlar elde etmesini sağlar. Bu çözümü çok sık kullandım. Ancak, stilleri manuel olarak sıfırlamak zorunda kaldım, geliştirme sırasında css'deki öğenin ilk konumlandırmasını / görüntüsünü değiştirdiğim için, genellikle ilgili javascript kodunu güncellemeyi unuttuğum göz önüne alındığında, bu hantal bulmaya geldim. Aşağıdaki kod, sözde stilleri sıfırlamaz, ancak javascript tarafından eklenen satır içi stilleri kaldırır:

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

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

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

Buradaki tek varsayım, başka satır içi stiller olamaz ya da kaldırılacaktır. Bununla birlikte, buradaki avantaj, öğenin stillerinin css stil sayfasında oldukları şekilde döndürülmesidir. Sonuç olarak, bunu bir öğenin geçtiği ve yükseklik veya genişliğin döndürüldüğü bir işlev olarak yazabilirsiniz.

Stilleri js aracılığıyla satır içi olarak ayarlamayı bulduğum başka bir sorun, css3 yoluyla geçişlerle uğraşırken, stil kurallarınızın ağırlıklarını bazen sinir bozucu olabilecek satır içi bir stilden daha güçlü olacak şekilde uyarlamak zorunda kalmanızdır.

Tanım gereği, bir eleman yalnızca görünürse yüksekliğe sahiptir.

Sadece merak ediyorum: neden gizli bir elemanın yüksekliğine ihtiyacınız var?

Bir alternatif, bir öğeyi bir tür bindirmenin arkasına koyarak (z-endeksi kullanarak) etkili bir şekilde gizlemektir.

Benim durumumda, yükseklik değerini almamı engelleyen gizli bir öğem de vardı, ancak öğenin kendisi değil, ebeveynlerinden biri oldu ... bu yüzden eklentilerimden birinin gizli, aksi takdirde en yakın gizli öğeyi bulun. İşte bir örnek:

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');
    }
}

Aslında, bu, Nick, Gregory ve Eyelidlessness'in Gregory'nin gelişmiş yöntemini size vermesi için verdiği yanıtların bir birleşimidir, ancak stil özelliğinde geri koymak istediğiniz bir şey olması durumunda her iki yöntemi de kullanır ve arar. bir üst öğe.

Benim çözümümdeki tek sıkıntı, ebeveynler arasındaki döngünün tamamen verimli olmamasıdır.

Çözümlerden biri, yüksekliğini almak istediğiniz öğenin dışında bir üst div oluşturmak, '0' yüksekliğini uygulamak ve taşmayı gizlemektir. Ardından, alt öğenin yüksekliğini alın ve üst öğenin taşma özelliğini kaldırın.

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>

İşte gizli elemanlar, hatta gizli ebeveynlerin torunları için jQuery'nin tüm boyut yöntemlerini ele almak için yazdığım bir komut dosyası. Elbette, bunu kullanarak bir performans isabeti olduğunu unutmayın.

// 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);

Öğeyi daha önce sayfada görüntülediyseniz, yüksekliği doğrudan DOM öğesinden (jQuery'de .get (0) ile erişilebilir) alabilirsiniz, çünkü öğe gizlenmiş olsa bile ayarlanmıştır:

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

genişlik için aynı:

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

(düzeltme için Skeets O'Reilly'e teşekkürler)