Wie erhalte ich die Stilwerte eines HTML-Elements in Javascript?

Lesezeit: 4 Minuten

Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
Stan

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.

  • Siehe auch: stackoverflow.com/questions/2531737/…

    – BalusC

    18. April 2010 um 21:35 Uhr

Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
Christian C. Salvado

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.

  • Déjà-vu

    – BalusC

    18. April 2010 um 21:36 Uhr


  • @BalusC: Ich denke, diese Frage ist mehr generischvielleicht könnte ein Moderator sie zusammenführen? …

    – Christian C. Salvado

    18. April 2010 um 21:43 Uhr

  • Es ist viel komplizierter, als ich es mir vorgestellt habe. Vielen Dank für die schnelle Antwort. Ich habe versucht, danach zu suchen, aber ich habe immer wieder Antworten für verschiedene Bibliotheken erhalten, insbesondere für jQuery. @BalusC: Danke für die Bearbeitung

    – Stan

    18. April 2010 um 22:06 Uhr

  • document.defaultView ist window. Also statt document.defaultView.getComputedStyle Sie können direkt verwenden getComputedStyle.

    – Oriol

    4. August 2015 um 22:02 Uhr

  • Ihr erster Absatz erklärt, warum mein Javascript nach dem Verschieben meines Inline-CSS in eine separate Datei nicht funktionierte. Der einzige Ort, den ich online gefunden habe, der darauf hinweist, danke!

    – TenLeftFingers

    29. Oktober 2019 um 13:28 Uhr

1646260928 782 Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
justina_de

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

1646260928 202 Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
Jared Forsyth

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.

  • Er hat in der Frage ausdrücklich angegeben, dass er keine Bibliotheken verwenden möchte (jQuery ist eine Bibliothek …).

    – Scheu

    14. Oktober 2010 um 4:54 Uhr

Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
praveen-ich

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>

1646260929 152 Wie erhalte ich die Stilwerte eines HTML Elements in Javascript
MRJAHID

window.getComputedStyle(box).backgroundColor

916890cookie-checkWie erhalte ich die Stilwerte eines HTML-Elements in Javascript?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy