jQuery - Obtenir la largeur de l'élément lorsqu'il n'est pas visible (affichage: aucun)

Il semble que dans jQuery lorsqu'un élément n'est pas visible, width () retourne 0. Cela a du sens, mais j'ai besoin d'obtenir la largeur d'un tableau afin de définir la largeur du parent avant d'afficher le parent.

Comme indiqué ci-dessous, il y a du texte dans le parent, ce qui le rend biaisé et semble méchant. Je veux que le parent soit aussi large que la table et que le texte soit enveloppé.

<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 renvoie toujours 0 car il n'est pas visible (c'est mon estimation car il me donne un nombre lorsqu'il est visible). Existe-t-il un moyen d'obtenir la largeur du tableau sans rendre le parent visible?

Voici une astuce que j'ai utilisée. Cela implique d'ajouter des propriétés CSS pour faire croire à jQuery que l'élément est visible, mais en fait il est toujours caché.

var $table = $("#parent").children("table");
$table.css({ position: "absolute", visibility: "hidden", display: "block" });
var tableWidth = $table.outerWidth();
$table.css({ position: "", visibility: "", display: "" });

C'est une sorte de hack, mais cela semble bien fonctionner pour moi.

METTRE À JOUR

J'ai depuis écrit un article de blog qui couvre ce sujet. La méthode utilisée ci-dessus peut être problématique car vous réinitialisez les propriétés CSS sur des valeurs vides. Et s'ils avaient des valeurs auparavant? La solution mise à jour utilise la méthode swap () qui a été trouvée dans le code source jQuery.

Code d'un article de blog référencé:

//Optional parameter includeMargin is used when calculating outer dimensions  
(function ($) {
$.fn.getHiddenDimensions = function (includeMargin) {
    var $item = this,
    props = { position: 'absolute', visibility: 'hidden', display: 'block' },
    dim = { width: 0, height: 0, innerWidth: 0, innerHeight: 0, outerWidth: 0, outerHeight: 0 },
    $hiddenParents = $item.parents().andSelf().not(':visible'),
    includeMargin = (includeMargin == null) ? false : includeMargin;

    var oldProps = [];
    $hiddenParents.each(function () {
        var old = {};

        for (var name in props) {
            old[name] = this.style[name];
            this.style[name] = props[name];
        }

        oldProps.push(old);
    });

    dim.width = $item.width();
    dim.outerWidth = $item.outerWidth(includeMargin);
    dim.innerWidth = $item.innerWidth();
    dim.height = $item.height();
    dim.innerHeight = $item.innerHeight();
    dim.outerHeight = $item.outerHeight(includeMargin);

    $hiddenParents.each(function (i) {
        var old = oldProps[i];
        for (var name in props) {
            this.style[name] = old[name];
        }
    });

    return dim;
}
}(jQuery));

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

Basé sur la réponse de Roberts, voici ma fonction. Cela fonctionne pour moi si l'élément ou son parent a été effacé via jQuery, peut obtenir des dimensions internes ou externes et renvoie également les valeurs de décalage.

/ edit1: réécrit la fonction. il est maintenant plus petit et peut être appelé directement sur l'objet

/ edit2: la fonction insère désormais le clone juste après l'élément d'origine au lieu du corps, ce qui permet au clone de conserver les dimensions héritées.

$.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();

Merci d'avoir publié la fonction realWidth ci-dessus, cela m'a vraiment aidé. Sur la base de la fonction "realWidth" ci-dessus, j'ai écrit, une réinitialisation CSS, (raison décrite ci-dessous).

function getUnvisibleDimensions(obj) {
    if ($(obj).length == 0) {
        return false;
    }

    var clone = obj.clone();
    clone.css({
        visibility:'hidden',
        width : '',
        height: '',
        maxWidth : '',
        maxHeight: ''
    });
    $('body').append(clone);
    var width = clone.outerWidth(),
        height = clone.outerHeight();
    clone.remove();
    return {w:width, h:height};
}

"realWidth" obtient la largeur d'une balise existante. J'ai testé cela avec quelques balises d'image. Le problème était que lorsque l'image a donné une dimension CSS par largeur (ou largeur maximale), vous n'obtiendrez jamais la dimension réelle de cette image. Peut-être que l'img a "max-width: 100%", la fonction "realWidth" le clone et l'ajoute au corps. Si la taille d'origine de l'image est plus grande que le corps, alors vous obtenez la taille du corps et non la taille réelle de cette image.

J'essaie de trouver une fonction fonctionnelle pour l'élément caché mais je me rends compte que CSS est beaucoup plus complexe que tout le monde ne le pense. Il existe de nombreuses nouvelles techniques de mise en page dans CSS3 qui pourraient ne pas fonctionner pour toutes les réponses précédentes telles que la boîte flexible, la grille, la colonne ou même l'élément à l'intérieur d'un élément parent complexe.

exemple de flexibox

Je pense que la seule solution durable et simple est le rendu en temps réel . À ce moment-là, le navigateur devrait vous donner la taille d'élément correcte .

Malheureusement, JavaScript ne fournit aucun événement direct pour notifier lorsqu'un élément est affiché ou masqué. Cependant, je crée une fonction basée sur l'API DOM Attribute Modified qui exécutera la fonction de rappel lorsque la visibilité de l'élément est modifiée.

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

    // render or adjust something
});

Pour plus d'informations, veuillez visiter mon projet GitHub.

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

démo: http://jsbin.com/ETiGIre/7

Si vous avez besoin de la largeur de quelque chose qui est caché et que vous ne pouvez pas le masquer pour une raison quelconque, vous pouvez le cloner, modifier le CSS pour qu'il s'affiche hors de la page, le rendre invisible, puis le mesurer. L'utilisateur ne sera pas plus sage s'il est masqué et supprimé par la suite.

Certaines des autres réponses ici ne font que masquer la visibilité, ce qui fonctionne, mais cela prendra un espace vide sur votre page pendant une fraction de seconde.

Exemple:

$itemClone = $('.hidden-item').clone().css({
        'visibility': 'hidden',
        'position': 'absolute',
        'z-index': '-99999',
        'left': '99999999px',
        'top': '0px'
    }).appendTo('body');
var width = $itemClone.width();
$itemClone.remove();

Avant de prendre la largeur, faites apparaître l'affichage parent, puis prenez la largeur et enfin faites masquer l'affichage parent. Tout comme suivre

$('#parent').show();
var tableWidth = $('#parent').children('table').outerWidth();
 $('#parent').hide();
if (tableWidth > $('#parent').width())
{
    $('#parent').width() = tableWidth;
}

Une solution, bien que cela ne fonctionne pas dans toutes les situations, est de masquer l'élément en définissant l'opacité sur 0. Un élément complètement transparent aura une largeur.

L'inconvénient est que l'élément prendra toujours de la place, mais ce ne sera pas un problème dans tous les cas.

Par exemple:

$(img).css("opacity", 0)  //element cannot be seen
width = $(img).width()    //but has width

Le plus gros problème qui échappe à la plupart des solutions ici est que la largeur d'un élément est souvent modifiée par CSS en fonction de sa portée en html.

Si je devais déterminer offsetWidth d'un élément en ajoutant un clone de celui-ci au corps quand il a des styles qui ne s'appliquent que dans sa portée actuelle, j'obtiendrais la mauvaise largeur.

par exemple:

// css

.module-container .my-elem {bordure: 60px noir uni; }

maintenant, quand j'essaie de déterminer la largeur de mon-elem dans le contexte du corps, il sera de 120px. Vous pouvez plutôt cloner le conteneur du module, mais votre JS ne devrait pas avoir à connaître ces détails.

Je ne l'ai pas testé mais essentiellement la solution de Soul_Master semble être la seule qui puisse fonctionner correctement. Mais malheureusement, en regardant l'implémentation, il sera probablement coûteux à utiliser et mauvais pour les performances (comme la plupart des solutions présentées ici le sont également.)

Si cela est possible, utilisez la visibilité: masqué à la place. Cela rendra toujours l'élément, vous permettant de calculer la largeur sans trop de bruit.

En plus de la réponse publiée par Tim Banks , qui a suivi pour résoudre mon problème, j'ai dû modifier une chose simple.

Quelqu'un d'autre pourrait avoir le même problème; Je travaille avec une liste déroulante Bootstrap dans une liste déroulante. Mais le texte peut être plus large que le contenu actuel à ce stade (et il n'y a pas beaucoup de bonnes façons de résoudre cela via css).

J'ai utilisé:

$table.css({ position: "absolute", visibility: "hidden", display: "table" });

à la place, ce qui définit le conteneur sur une table dont la largeur est toujours mise à l'échelle si le contenu est plus large.

jQuery(".megamenu li.level0 .dropdown-container .sub-column ul .level1").on("mouseover", function () {
    var sum = 0;
    jQuery(this).find('ul li.level2').each(function(){
    sum -= jQuery(this).height();
    jQuery(this).parent('ul').css('margin-top', sum / 1.8);
    console.log(sum);
    });
});

En survolant, nous pouvons calculer la hauteur de l'élément de liste.

Comme cela a été dit précédemment, la méthode cloner et attacher ailleurs ne garantit pas les mêmes résultats car le style peut être différent.

Voici mon approche. Il fait remonter les parents à la recherche du parent responsable de la dissimulation, puis l'affiche temporairement pour calculer la largeur, la hauteur, etc.

    var width = parseInt($image.width(), 10);
    var height = parseInt($image.height(), 10);

    if (width === 0) {

        if ($image.css("display") === "none") {

            $image.css("display", "block");
            width = parseInt($image.width(), 10);
            height = parseInt($image.height(), 10);
            $image.css("display", "none");
        }
        else {

            $image.parents().each(function () {

                var $parent = $(this);
                if ($parent.css("display") === "none") {

                    $parent.css("display", "block");
                    width = parseInt($image.width(), 10);
                    height = parseInt($image.height(), 10);
                    $parent.css("display", "none");
                }
            });
        }
    }