web-dev-qa-db-fra.com

Comment obtenir les valeurs de style d'un élément HTML en javascript?

Je cherche un moyen de récupérer le style d'un élément ayant un style défini par la balise style.

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

Dans le corps 

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

Je cherche du javascript direct sans utiliser de bibliothèques.

J'ai essayé ce qui suit, mais je continue à recevoir des blancs:

alert (document.getElementById("box").style.width);  
alert (document.getElementById("box").style.getPropertyValue("width"));

J'ai remarqué que je ne suis capable d'utiliser ce qui précède que si j'ai défini le style à l'aide de javascript, mais incapable d'utiliser les balises de style.

javascripthtmlcssstylesheet
49
stan

La propriété element.style vous permet de connaître uniquement les propriétés CSS définies en tant que inline dans cet élément (par programme ou définies dans l'attribut style de l'élément), vous devriez obtenir le style calculé. .

N’est-ce pas si facile de le faire de manière inter-navigateur, IE a sa propre manière, via la propriété element.currentStyle, et la méthode DOM niveau 2 standard, implémentée par d’autres navigateurs, se fait par le biais de document.defaultView.getComputedStyle méthode.

Les deux manières ont des différences, par exemple, la propriété IE element.currentStyle s'attend à ce que vous accédiez aux noms de propriété CCS composés de deux mots ou plus dans camelCase (par exemple, maxHeight, fontSize, backgroundColor, etc.) ), la méthode standard attend les propriétés avec les mots séparés par des tirets (par exemple, max-height, font-size, background-color, etc.).

En outre, le IE element.currentStyle renverra toutes les tailles de l'unité spécifiée (par exemple, 12 pt, 50%, 5 em), la méthode standard calcule toujours la taille réelle en pixels.

Il y a quelque temps, j'ai créé une fonction multi-navigateurs qui vous permet d'obtenir les styles calculés d'une manière multi-navigateurs:

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 parfaite dans certains cas, par exemple pour les couleurs, la méthode standard renverra les couleurs dans la notation rgb (...), sous IE, elles les retourneront telles qu'elles ont été définies.

Je travaille actuellement sur un article dans le sujet, vous pouvez suivre les modifications apportées à cette fonction ici .

74
CMS

Je crois que vous pouvez maintenant utiliser Window.getComputedStyle () 

Documentation MDN

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

Exemple pour obtenir la largeur d'un élément:

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

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

- Si vous n'avez pas jeté un œil à jQuery, je le recommande vivement. cela facilite de nombreuses tâches javascript simples.

Mettre à jour

pour mémoire, ce poste a 5 ans. Le Web s'est développé, a évolué, etc. Il existe des moyens de le faire avec Plain Old Javascript, qui est meilleur.

9
Jared Forsyth

En utilisant .css () dans jquery, la balise style peut être consultée et modifiée

par exemple:

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

Vous pouvez créer la fonction getStyles qui prendra un élément et les autres arguments sont des propriétés que vous souhaitez.

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

OR

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