Ich suche nach einer Möglichkeit, den Stil von einem Element abzurufen, für das ein Stil durch das style-Tag festgelegt wurde.

<style> 
#box {width: 100px;}
</style>

Im Körper

<div id="box"></div>

Ich suche nach geradem Javascript ohne die Verwendung von Bibliotheken.

Ich habe Folgendes versucht, bekomme aber immer wieder Leerzeichen:

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

Mir ist aufgefallen, dass ich das Obige nur verwenden kann, wenn ich den Stil mit Javascript festgelegt habe, aber nicht mit den Stil-Tags.

Die element.style -Eigenschaft informiert Sie nur über die CSS-Eigenschaften, die als definiert wurden in der Reihe in diesem Element (programmgesteuert oder im Stilattribut des Elements definiert) sollten Sie die erhalten berechneter Stil.

Es ist nicht so einfach, dies browserübergreifend zu tun, der IE hat seinen eigenen Weg, durch die element.currentStyle -Eigenschaft und das DOM Level 2 Standard Art und Weise, die von anderen Browsern implementiert wird, ist durch die document.defaultView.getComputedStyle Methode.

Die beiden Wege haben Unterschiede, zum Beispiel der IE element.currentStyle -Eigenschaft erwarten, dass Sie auf CCS-Eigenschaftsnamen zugreifen, die aus zwei oder mehr Wörtern in bestehen camelCase (z.B maxHeight, fontSize, backgroundColorusw.), erwartet der Standardweg die Eigenschaften mit durch Bindestriche getrennten Wörtern (zB max-height, font-size, background-coloretc).

Auch der IE element.currentStyle gibt alle Größen in der Einheit zurück, in der sie angegeben wurden (z. B. 12pt, 50%, 5em), die Standardmethode berechnet immer die tatsächliche Größe in Pixeln.

Ich habe vor einiger Zeit eine browserübergreifende Funktion erstellt, mit der Sie die berechneten Stile browserübergreifend abrufen können:

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  // W3C standard way:
  if (defaultView && defaultView.getComputedStyle) {
    // sanitize property name to css notation
    // (hypen separated words eg. font-Size)
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  } else if (el.currentStyle) { // IE
    // sanitize property name to camelCase
    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
      return letter.toUpperCase();
    });
    value = el.currentStyle[styleProp];
    // convert other units to pixels on IE
    if (/^\d+(em|pt|%|ex)?$/i.test(value)) { 
      return (function(value) {
        var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left;
        el.runtimeStyle.left = el.currentStyle.left;
        el.style.left = value || 0;
        value = el.style.pixelLeft + "px";
        el.style.left = oldLeft;
        el.runtimeStyle.left = oldRsLeft;
        return value;
      })(value);
    }
    return value;
  }
}

Die obige Funktion ist für einige Fälle nicht perfekt, zum Beispiel für Farben, die Standardmethode gibt Farben zurück RGB(…) Notation, im IE werden sie so zurückgegeben, wie sie definiert wurden.

Ich arbeite gerade an einem Artikel in diesem Thema, Sie können die Änderungen verfolgen, die ich an dieser Funktion vornehme Hier.

Ich glaube, Sie können jetzt Window.getComputedStyle() verwenden

Dokumentation MDN

var style = window.getComputedStyle(element[, pseudoElt]);

Beispiel, um die Breite eines Elements zu erhalten:

window.getComputedStyle(document.querySelector('#mainbar')).width

Im jQuerydu kannst tun alert($("#theid").css("width")).

— wenn Sie sich jQuery noch nicht angesehen haben, kann ich es nur empfehlen; Es macht viele einfache Javascript-Aufgaben mühelos.

Aktualisieren

Fürs Protokoll, dieser Beitrag ist 5 Jahre alt. Das Web hat sich entwickelt, sich weiterentwickelt usw. Es gibt Möglichkeiten, dies mit Plain Old Javascript zu tun, was besser ist.

Sie können Funktion machen getStyles das nimmt ein Element und andere Argumente sind Eigenschaften, die Werte sind, die Sie wollen.

const convertRestArgsIntoStylesArr = ([...args]) => {
    return args.slice(1);
}

const getStyles = function () {
    const args = [...arguments];
    const [element] = args;

    let stylesProps = [...args][1] instanceof Array ? args[1] : convertRestArgsIntoStylesArr(args);

    const styles = window.getComputedStyle(element);
    const stylesObj = stylesProps.reduce((acc, v) => {
        acc[v] = styles.getPropertyValue(v);
        return acc;
    }, {});

    return stylesObj;
};

Jetzt können Sie diese Funktion wie folgt verwenden:

const styles = getStyles(document.body, "height", "width");

ODER

const styles = getStyles(document.body, ["height", "width"]);

Verwenden getComputedStyle Funktion, Berechneter Stil enthält alle CSS-Eigenschaften auf ein Element setzen. Auch wenn Sie keine Eigenschaft auf ein Element setzen. Sie finden diese Eigenschaft immer noch in den berechneten Stilen.

Beispiel:

<style>
#Body_element {
color: green;
}
</style>

<body id="Body_element">
<script>
     alert(getComputedStyle(Body_element).color)
</script>
</body>



    

window.getComputedStyle(box).backgroundColor