Accédant à des styles à partir d'éléments html avec javascript

Question:

Comment puis-je réinterroger les valeurs de style comprimées d'un élément HTML en utilisant javascript Tag?

Solution:

Pour obtenir les valeurs de style calculées, il est nécessaire d'accéder au style calculé de l'élément. Il existe deux approches, avec la méthode standard Dom Level 2 prise en charge par la plupart des navigateurs, et la propriété élément spécifique. CurrentStyle.

méthode standard (w3c):

function getStyle(el, styleProp) {
  var value, defaultView = (el.ownerDocument || document).defaultView;
  if (defaultView && defaultView.getComputedStyle) {
    styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase();
    return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
  }
}

Ici, les noms de propriétés doivent être au format séparé de traits (par exemple, "Font-Size"). Les valeurs seront renvoyées en pixels.

ie Method:

if (el.currentStyle) {
  styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
    return letter.toUpperCase();
  });
  value = el.currentStyle[styleProp];
  if (/^\d (em|pt|%|ex)?$/i.test(value)) {
    // Convert non-pixel units to pixels
    ...
  }
}

IE s'attend à ce que les noms de propriété soient au format Camelcase et renvoie des valeurs dans les unités spécifiées. Notez que cette méthode a certaines limites.

Exemple usage:

var element = document.getElementById("box");
var width = getStyle(element, "width");
console.log("Width: "   width);