How to get element Höhe/Breite mit margin, padding, border in nativem JavaScript (ohne jQuery)

Suche nach einer zuverlässigen Methode zur Berechnung des Elements Breite/Höhe + margin - padding + border mit nativen JS nur und xbrowser (IE8+)

TA

InformationsquelleAutor Donatas Cereska | 2014-04-24

  1. 24

    Wenn Sie nur den Umgang mit pixel-Werte für margin, padding und border-Eigenschaften, können Sie Folgendes tun:

    //we're assuming a reference to your element in a variable called 'element'
var style = element.currentStyle || window.getComputedStyle(element),
    width = element.offsetWidth, //or use style.width
    margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight),
    padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight),
    border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);

alert(width + margin - padding + border);

    Wenn man sich mit anderen Arten von Werten (wie ems, Punkte oder Werte wie auto), möchte ich verweisen Sie auf diese Antwort.

    +1 ich mochte es, da Sie abgedeckt haben, alle die Punkte, obwohl Sie haben könnte, erwähnt element.getBoundingClientRect Funktion, in Ihrer Antwort.
    Denken Sie daran, Sie haben zu erklären, dass die breiten border-left-width oder border-right-width im css obwohl. Es wird nicht analysiert linken Breite von einem Stil erklärt border-width oder einfach border.

    InformationsquelleAutor reaxis

Schreibe einen Kommentar