it-swarm.com.de

Holen Sie sich einen CSS-Wert mit JavaScript

Ich weiß, dass ich set einen CSS-Wert über JavaScript setzen kann, wie zum Beispiel:

document.getElementById('image_1').style.top = '100px';

Aber kann ich erhalten einen aktuellen bestimmten Stilwert? Ich habe gelesen, wo ich den gesamten Stil für das Element erhalten kann, aber ich möchte nicht den gesamten String analysieren müssen, wenn ich nicht muss.

170
Michael Paul

Sie können getComputedStyle() verwenden.

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

jsFiddle .

309
alex

Mit der Eigenschaft element.style können Sie nur die CSS-Eigenschaften kennen, 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, der von anderen Browsern implementiert wird, erfolgt über die document.defaultView. getComputedStyle-Methode.

Die zwei Möglichkeiten weisen Unterschiede auf. Beispielsweise erwartet die element.currentStyle -Eigenschaft IE, dass Sie auf die CSS-Eigenschaftsnamen zugreifen, die aus zwei oder mehr Wörtern in camelCase bestehen (z. B. maxHeight, fontSize, backgroundColor usw.) die Eigenschaften mit den durch Bindestriche getrennten Wörtern (z. B. maximale Höhe, Schriftgröße, Hintergrundfarbe usw.) .......

function getStyle(el, styleProp) {
    var value, defaultView = (el.ownerDocument || document).defaultView;
    // W3C standard way:
    if (defaultView && defaultView.getComputedStyle) {
        // sanitize property name to css notation
        // (hyphen 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;
    }
}

Hauptreferenzstackoverflow

23
Amir Movahedi

Verwenden Sie das Folgende. Es hat mir geholfen.

document.getElementById('image_1').offsetTop

Siehe auch Stile abrufen.

20
user843938

Browserübergreifende Lösung zur Überprüfung von CSS-Werten ohne DOM-Manipulation:

function getStyleRuleValue(style, selector) {
    for (var i = 0; i < document.styleSheets.length; i++) {
        var mysheet = document.styleSheets[i];
        var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
        for (var j = 0; j < myrules.length; j++) {
            if (myrules[j].selectorText && myrules[j].selectorText.toLowerCase() === selector) {
                return myrules[j].style[style];
            }
        }

    }
};

Verwendungszweck:

getStyleRuleValue('backgroundColor', '.chart-color')

bereinigte Version (zwingt die Eingabe des Selektors in Kleinbuchstaben und ermöglicht die Verwendung von Fällen ohne ".")

function getStyleRuleValue(style, selector) {
var selector_compare=selector.toLowerCase();
var selector_compare2= selector_compare.substr(0,1)==='.' ?  selector_compare.substr(1) : '.'+selector_compare;

for (var i = 0; i < document.styleSheets.length; i++) {
    var mysheet = document.styleSheets[i];
    var myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (var j = 0; j < myrules.length; j++) {
        if (myrules[j].selectorText) {
            var check = myrules[j].selectorText.toLowerCase();
            switch (check) {
                case selector_compare  :
                case selector_compare2 : return myrules[j].style[style];
            }
        }
    }

}

}

13
karolf

Wenn Sie es programmgesteuert festlegen, können Sie es einfach wie eine Variable aufrufen (d. H. document.getElementById('image_1').style.top). Andernfalls können Sie jQuery immer verwenden:

<html>
    <body>
        <div id="test" style="height: 100px;">Test</div>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            alert($("#test").css("height"));
        </script>
    </body>
</html>
7
adotout

Wenn Sie sich für Bibliotheken interessieren, warum nicht MyLibrary und getStyle .

Die jQuery-Methode css hat einen falschen Namen. CSS ist nur eine Möglichkeit, Stile festzulegen, und repräsentiert nicht unbedingt die tatsächlichen Werte der Stileigenschaften eines Elements.

2
RobG

Aus Sicherheitsgründen möchten Sie möglicherweise prüfen, ob das Element vorhanden ist, bevor Sie versuchen, daraus zu lesen. Wenn dies nicht der Fall ist, gibt der Code eine Ausnahme aus, die die Ausführung des restlichen JavaScript-Codes stoppt und möglicherweise eine Fehlermeldung an den Benutzer anzeigt - nicht geeignet. Sie möchten in der Lage sein, elegant zu versagen.

var height, width, top, margin, item;
item = document.getElementById( "image_1" );
if( item ) {
  height = item.style.height;
  width = item.style.width;
  top = item.style.top;
  margin = item.style.margin;
} else {
  // Fail gracefully here
}
1
BryanH

Du kannst tun:

getComputedStyle(document.querySelector(".className"))

https://zellwk.com/blog/css-values-in-js/

1
aabiro

Die Cross-Browser-Lösung ohne DOM-Manipulation funktioniert nicht, da sie die erste Übereinstimmungsregel und nicht die letzte Regel angibt. Die letzte Übereinstimmungsregel ist diejenige, die gilt. Hier ist eine funktionierende Version:

function getStyleRuleValue(style, selector) {
  let value = null;
  for (let i = 0; i < document.styleSheets.length; i++) {
    const mysheet = document.styleSheets[i];
    const myrules = mysheet.cssRules ? mysheet.cssRules : mysheet.rules;
    for (let j = 0; j < myrules.length; j++) {
      if (myrules[j].selectorText && 
          myrules[j].selectorText.toLowerCase() === selector) {
        value =  myrules[j].style[style];
      }
    }
  }
  return value;
}  

Diese einfache Suche funktioniert jedoch nicht bei komplexen Selektoren.

0
jcdufourd