Holen Sie sich einen CSS-Wert mit JavaScript

Ich weiß, dass ich einen CSS-Wert über JavaScript festlegen kann , z.

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

Aber ich kann bekommen einen aktuellen spezifischen Stil Wert? 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.

Sie können verwenden getComputedStyle().

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

jsFiddle .

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 browserübergreifend zu tun. Der IE hat seinen eigenen Weg über die element.currentStyle-Eigenschaft, und der von anderen Browsern implementierte DOM Level 2-Standardweg erfolgt über die document.defaultView.getComputedStyle-Methode.

Die beiden Methoden weisen Unterschiede auf. Beispielsweise erwartet die IE-Eigenschaft element.currentStyle, dass Sie auf die CSS-Eigenschaftsnamen zugreifen, die aus zwei oder mehr Wörtern in camelCase bestehen (z. B. maxHeight, fontSize, backgroundColor usw.). Die Standardmethode erwartet die Eigenschaften mit der Wörter, die durch Bindestriche getrennt sind (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;
    }
}

Hauptreferenz-Stackoverflow

Verwenden Sie Folgendes. Es hat mir geholfen.

document.getElementById('image_1').offsetTop

Siehe auch Stile abrufen .

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

function get_style_rule_value(selector, style)
{
 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];
   }
  }
 }
};

Verwendung:

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

Bereinigte Version (erzwingt die Auswahl des Selektors in Kleinbuchstaben und ermöglicht den Anwendungsfall ohne führendes ".")

function get_style_rule_value(selector, style)
{
 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];
     }
    }
   }
  }
 }

Wenn Sie es programmgesteuert einstellen, können Sie es einfach wie eine Variable (dh document.getElementById('image_1').style.top) aufrufen . Andernfalls können Sie immer jQuery 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>

Wenn Sie in Bibliotheken, warum nicht MyLibrary und getStyle .

Die jQuery CSS - Methode ist falsch benannt, CSS ist nur eine Art und Weise Arten der Einstellung und stellen nicht notwendigerweise die tatsächlichen Werte eines Style - Eigenschaften des Elements.

Im Jahr 2020

vor Gebrauch prüfen

Sie können computedStyleMap () verwenden

Die Antwort ist gültig, aber manchmal müssen Sie überprüfen, welche Einheit zurückgegeben wird. Sie können dies ohne eine slice()oder eine substring()Zeichenfolge erhalten.

var element = document.querySelector('.js-header-rep');
element.computedStyleMap().get('padding-left');

var element = document.querySelector('.jsCSS');
var con = element.computedStyleMap().get('padding-left');
console.log(con);

.jsCSS {
  width: 10rem;
  height: 10rem;
  background-color: skyblue;
  padding-left: 10px;
}

<div class="jsCSS"></div>

Aus Sicherheitsgründen möchten Sie möglicherweise überprüfen, ob das Element vorhanden ist, bevor Sie versuchen, daraus zu lesen. Wenn es nicht vorhanden ist, löst Ihr Code eine Ausnahme aus, die die Ausführung auf dem Rest Ihres JavaScript stoppt und dem Benutzer möglicherweise eine Fehlermeldung anzeigt - nicht gut. Sie möchten in der Lage sein, anmutig zu scheitern.

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
}

Die oben angegebene browserübergreifende Lösung ohne DOM-Manipulation funktioniert nicht, da sie die erste und nicht die letzte Übereinstimmungsregel enthält. Die letzte Übereinstimmungsregel ist diejenige, die gilt. Hier ist eine Arbeitsversion:

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 bei komplexen Selektoren nicht.