Cross-Browser (IE8-) getComputedStyle mit Javascript?

Du nicht jquery verwenden möchten, aber es gibt nichts verhindern, dass Sie spähen in den code und sehen, wie Sie damit umgegangen 🙂

Innen jquery-code gibt es einen Verweis über dieser Kommentar das scheint der Punkt (Lesen Sie dazu auch den gesamten Artikel).
Hier der jquery-code, der sollte mit Ihrem problem befassen:

else if ( document.documentElement.currentStyle ) {
    curCSS = function( elem, name ) {
        var left, rsLeft,
            ret = elem.currentStyle && elem.currentStyle[ name ],
        style = elem.style;

    //Avoid setting ret to empty string here
    //so we don't default to auto
    if ( ret == null && style && style[ name ] ) {
        ret = style[ name ];
    }

    //From the awesome hack by Dean Edwards
    //http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

    //If we're not dealing with a regular pixel number
    //but a number that has a weird ending, we need to convert it to pixels
    //but not position css attributes, as those are proportional to the parent element instead
    //and we can't measure the parent instead because it might trigger a "stacking dolls" problem
    if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {

        //Remember the original values
        left = style.left;
        rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;

        //Put in the new values to get a computed value out
        if ( rsLeft ) {
            elem.runtimeStyle.left = elem.currentStyle.left;
        }
        style.left = name === "fontSize" ? "1em" : ret;
        ret = style.pixelLeft + "px";

        //Revert the changed values
        style.left = left;
        if ( rsLeft ) {
            elem.runtimeStyle.left = rsLeft;
        }
    }

    return ret === "" ? "auto" : ret;
};
}

InformationsquelleAutor der Antwort

Funktioniert dies nicht für alle Stile, aber funktioniert für die Abmessungen (das ist das, was ich brauchte).

Anstatt zu versuchen zu erraten, welche Stile angewendet werden, verwenden Sie einfach die position in Pixel von jeder der vier Seiten der box-like element zur Berechnung der Abmessungen. Dies funktioniert auch, wieder auf den IE 5 und FF 3.

height = elem.getBoundingClientRect().bottom - elem.getBoundingClientRect().top;
width = elem.getBoundingClientRect().right - elem.getBoundingClientRect().left;

Siehe auch: getBoundingClientRect ist genial

Wenn dies immer noch nicht funktioniert für Sie, überprüfen Sie heraus diese Geige ich habe für die Berechnung die innere Breite der Schachtel. Es verwendet die folgenden als shim für getComputedStyle:

/**
 * getComputedStyle function for IE8
 * borrowed from:
 * http://missouristate.info/scripts/2013/common.js
 */
"getComputedStyle" in window || function() {
  function c(a, b, g, e) {
    var h = b[g];
    b = parseFloat(h);
    h = h.split(/\d/)[0];
    e = null !== e ? e : /%|em/.test(h) && a.parentElement ? c(a.parentElement, a.parentElement.currentStyle, "fontSize", null) : 16;
    a = "fontSize" == g ? e : /width/i.test(g) ? a.clientWidth : a.clientHeight;
    return "em" == h ? b * e : "in" == h ? 96 * b : "pt" == h ? 96 * b / 72 : "%" == h ? b / 100 * a : b;
  }
  function a(a, c) {
    var b = "border" == c ? "Width" : "", e = c + "Top" + b, h = c + "Right" + b, l = c + "Bottom" + b, b = c + "Left" + b;
    a[c] = (a[e] == a[h] == a[l] == a[b] ? [a[e]] : a[e] == a[l] && a[b] == a[h] ? [a[e], a[h]] : a[b] == a[h] ? [a[e], a[h], a[l]] : [a[e], a[h], a[l], a[b]]).join(" ");
  }
  function b(b) {
    var d, g = b.currentStyle, e = c(b, g, "fontSize", null);
    for (d in g) {
      /width|height|margin.|padding.|border.+W/.test(d) && "auto" !== this[d] ? this[d] = c(b, g, d, e) + "px" : "styleFloat" === d ? this["float"] = g[d] : this[d] = g[d];
    }
    a(this, "margin");
    a(this, "padding");
    a(this, "border");
    this.fontSize = e + "px";
    return this;
  }
  b.prototype = {};
  window.getComputedStyle = function(a) {
    return new b(a);
  };
}();

InformationsquelleAutor der Antwort Kyle Falconer