it-swarm.com.de

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

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

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

Im Körper 

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

Ich suche gerade Javascript ohne die Verwendung von Bibliotheken.

Ich habe folgendes ausprobiert, bekomme aber weiterhin 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 eingestellt habe, aber die Stil-Tags nicht.

49
stan

Mit der Eigenschaft element.style können Sie nur die CSS-Eigenschaften kennenlernen, die in diesem Element als inline definiert wurden (programmgesteuert oder im style-Attribut des Elements definiert). Sie sollten den berechneten -Stil erhalten.

Es ist nicht so einfach, dies über mehrere Browser hinweg zu tun. IE hat seinen eigenen Weg durch die element.currentStyle-Eigenschaft, und der DOM Level 2 standard Weg, der von anderen Browsern implementiert wird, erfolgt über die document.defaultView.getComputedStyle Methode.

Die zwei Möglichkeiten weisen Unterschiede auf. Beispielsweise erwartet die Eigenschaft IE element.currentStyle , dass Sie auf die CCS-Eigenschaftsnamen zugreifen, die aus zwei oder mehr Wörtern in camelCase bestehen (z. B. maxHeight, fontSize, backgroundColor). usw.) Die Standardmethode erwartet die Eigenschaften mit den durch Striche getrennten Wörtern (z. B. max-height, font-size, background-color usw.).

Außerdem gibt der IE element.currentStyle alle Größen in der Einheit zurück, für die sie angegeben wurden (z. B. 12pt, 50%, 5em). Standardmäßig wird die tatsächliche Größe immer in Pixel berechnet.

Ich habe vor einiger Zeit eine Cross-Browser-Funktion erstellt, mit der Sie die berechneten Stile auf verschiedene Art und Weise 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 in einigen Fällen nicht perfekt, z. B. für Farben. Die Standardmethode gibt Farben in der Schreibweise rgb (...) zurück. Bei IE werden sie so zurückgegeben, wie sie definiert wurden.

Ich arbeite gerade an einem Artikel im Betreff. Sie können die Änderungen an dieser Funktion hier verfolgen.

74
CMS

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

Dokumentation MDN

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

Beispiel für die Breite eines Elements:

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

In jQuery können Sie alert($("#theid").css("width")) ausführen.

- Wenn Sie sich nicht mit jQuery beschäftigt haben, empfehle ich es dringend. es macht viele einfache Javascript-Aufgaben mühelos.

Aktualisieren

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

9
Jared Forsyth

Durch die Verwendung von .css () in jquery kann auf das style-Tag zugegriffen und es geändert werden

zum Beispiel:

var color = $( this ).css( "background-color" );
  $( "#result" ).html( "That div is <span style='color:" +
    color + ";'>" + color + "</span>." );
0
Sanjeev S

Sie können die Funktion getStyles so einstellen, dass sie ein Element akzeptiert, und andere Argumente sind Eigenschaften, die von Ihnen gewünschte Werte sind.

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");

OR

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