web-dev-qa-db-fra.com

Comment obtenir la valeur de marge d'un div en JavaScript simple?

Je peux obtenir de la hauteur dans jQuery avec

$(item).outerHeight(true);

mais comment puis-je avec JS?

Je peux avoir la hauteur du li avec

document.getElementById(item).offsetHeight

mais j'obtiendrai toujours "" lorsque j'essaierai margin-top:

document.getElementById(item).style.marginTop
javascriptmargin
41
YuC

Les propriétés de l'objet style ne sont que les styles appliqués directement à l'élément (par exemple, via un attribut style ou dans le code). Alors .style.marginTop ne contiendra quelque chose que si vous avez quelque chose de spécifiquement affecté à cet élément (non attribué via une feuille de style, etc.).

Pour obtenir le style calculé actuel de l'objet, vous utilisez la propriété currentStyle (Microsoft) ou la fonction getComputedStyle (à peu près tous les autres).

Exemple:

var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);

display("Current marginTop: " + style.marginTop);

Juste avertissement: ce que vous récupérez peut ne pas être en pixels. Par exemple, si je lance ce qui précède sur un élément p dans IE9, je récupère "1em".

Live Copy | Source

87
T.J. Crowder

J'ai trouvé quelque chose de très utile sur ce site lorsque je cherchais une réponse à cette question. Vous pouvez le vérifier sur http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html . La partie qui m'a aidé était la suivante:

var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
alert(marLeft);
/* and if a number needs to be in px... */
alert(marLeft + 'px');

////////////////////////////////////

/***
 * get live runtime value of an element's css style
 *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
 *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
 ***/
var getStyle = function (e, styleName) {
    var styleValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle) {
        styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
    }
    else if(e.currentStyle) {
        styleName = styleName.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        styleValue = e.currentStyle[styleName];
    }
    return styleValue;
}
8
Snake

Vous pouvez également créer votre propre outerHeight pour les éléments HTML. Je ne sais pas si cela fonctionne dans IE, mais cela fonctionne dans Chrome. Vous pouvez peut-être améliorer le code ci-dessous en utilisant currentStyle, suggéré dans la réponse ci-dessus.

Object.defineProperty(Element.prototype, 'outerHeight', {
    'get': function(){
        var height = this.clientHeight;
        var computedStyle = window.getComputedStyle(this); 
        height += parseInt(computedStyle.marginTop, 10);
        height += parseInt(computedStyle.marginBottom, 10);
        height += parseInt(computedStyle.borderTopWidth, 10);
        height += parseInt(computedStyle.borderBottomWidth, 10);
        return height;
    }
});

Ce morceau de code vous permet de faire quelque chose comme ceci:

document.getElementById('foo').outerHeight

Selon caniuse.com, getComputedStyle est pris en charge par les principaux navigateurs (IE, Chrome, Firefox).

5
Fabio Montefuscolo