Ottieni un valore CSS con JavaScript

So di poter impostare un valore CSS tramite JavaScript come:

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

Ma posso ottenere un valore di stile specifico corrente? Ho letto dove posso ottenere l'intero stile per l'elemento, ma non voglio analizzare l'intera stringa se non devo.

È possibile utilizzare getComputedStyle().

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

jsFiddle .

La proprietà element.style ti consente di conoscere solo le proprietà CSS che sono state definite come inline in quell'elemento (programmaticamente o definite nell'attributo style dell'elemento), dovresti ottenere lo stile calcolato.

Non è così facile farlo in un browser incrociato, IE ha il suo modo, attraverso la proprietà element.currentStyle, e il modo standard DOM Level 2, implementato da altri browser è attraverso il metodo document.defaultView.getComputedStyle.

I due modi presentano differenze, ad esempio la proprietà IE element.currentStyle prevede che tu acceda ai nomi delle proprietà CSS composti da due o più parole in camelCase (ad es. MaxHeight, fontSize, backgroundColor, ecc.), Il modo standard prevede le proprietà con parole separate da trattini (ad es. altezza massima, dimensione carattere, colore di sfondo, ecc.). ......

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;
    }
}

Stackoverflow di riferimento principale

Utilizza il seguente. Mi ha aiutato

document.getElementById('image_1').offsetTop

Vedi anche Ottieni stili .

Soluzione cross-browser per il controllo dei valori CSS senza manipolazione DOM:

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];
   }
  }
 }
};

Uso:

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

Versione disinfettata (impone l'ingresso del selettore in minuscolo e consente l'uso del caso senza ".")

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];
     }
    }
   }
  }
 }

Se lo imposti a livello di codice, puoi semplicemente chiamarlo come una variabile (ad es document.getElementById('image_1').style.top.). Altrimenti, puoi sempre usare jQuery:

<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>

Se ti piacciono le librerie, perché non MyLibrary e getStyle .

Il metodo CSS jQuery è erroneamente chiamato, CSS è solo un modo di impostare gli stili e non rappresenta necessariamente i valori effettivi delle proprietà di stile di un elemento.

Nel 2020

controllare prima dell'uso

Puoi usare computedStyleMap ()

La risposta è valida ma a volte è necessario verificare quale unità restituisce, è possibile ottenerla senza nessuna slice()o substring()stringa.

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>

Per motivi di sicurezza, potresti voler verificare che l'elemento esista prima di tentare di leggerlo. Se non esiste, il tuo codice genererà un'eccezione, che interromperà l'esecuzione sul resto del tuo JavaScript e potenzialmente visualizzerà un messaggio di errore per l'utente - non va bene. Vuoi essere in grado di fallire con grazia.

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
}

La soluzione cross-browser senza la manipolazione DOM indicata sopra non funziona perché fornisce la prima regola corrispondente, non l'ultima. L'ultima regola corrispondente è quella applicabile. Ecco una versione funzionante:

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;
}  

Tuttavia, questa semplice ricerca non funzionerà in caso di selettori complessi.