Comment obtenir un élément HTML du style de valeurs en javascript?

La élément .style propriété vous permet de savoir uniquement les propriétés CSS qui ont été définis comme inline dans cet élément (par programmation, ou défini dans l'attribut style de l'élément), vous devriez obtenir la calculée style.

N'est pas si facile de le faire en une manière de croix-navigateur, c'est à dire à sa façon, par le biais de la element.currentStyle de la propriété, et le DOM Niveau 2 standard façon, mis en œuvre par d'autres navigateurs est par le biais de la document.defaultView.getComputedStyle méthode.

Les deux façons de différences, par exemple, l'IE élément .currentStyle bien s'attendre à ce que vous accédez à la SCC noms de propriété composée de deux mots ou plus dans camelCase (par exemple maxHeight, fontSize, backgroundColor, etc), le standard s'attend à ce que les propriétés avec les mots séparés par des tirets (par exemple max-height, font-size, background-color, etc).

Aussi, l'IE element.currentStyle retournera toutes les tailles dans l'unité qu'ils ont été spécifiés (par exemple, 12pt, 50%, 5em), le standard va calculer la taille réelle en pixels toujours.

J'ai fait il y a quelques temps un cross-browser fonction qui vous permet d'obtenir le calcul des styles dans une manière de croix-navigateur:

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

La fonction ci-dessus n'est pas parfait, pour certains cas, par exemple pour les couleurs, la méthode standard sera de retour couleurs dans le rgb(...) notation, sur IE ils seront de retour comme ils ont été définis.

Je suis actuellement en train de travailler sur un article dans le sujet, vous pouvez suivre les modifications que je fais sur cette fonction ici.

Dans jQuery, vous pouvez le faire alert($("#theid").css("width")).

-- si vous n'avez pas pris un coup d'oeil à jQuery, je vous le recommande fortement; elle fait beaucoup de javascript simple des tâches sans effort.

Mise à jour

pour l'enregistrement, ce post est de 5 ans. Le web a développé, déplacés, etc. Il y a des façons de le faire avec un bon Vieux Javascript, ce qui est mieux.

Vous pouvez faire fonctionner getStyles que vais prendre un élément et d'autres arguments sont des propriétés que les valeurs que vous voulez.

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

Maintenant, vous pouvez utiliser cette fonction comme ceci:

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

OU

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