Manipulation des CSS calculées en JavaScript

source de l'article : http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/

JavaScript fournit des méthodes pour accéder ou modifier rapidement des propriétés CSS grâce à la syntaxe object.style.property

Ex:
var obj = document.getElementByTagName('div')
obj.style.backgroundColor //pour modifier une propriété
document.writeln(
obj.style.backgroundColor); //pour accéder à la propriété

Le soucis avec cette méthode, c'est qu'on ne manipule que les CSS en inline dans les tags HTML ou créées à l'aide du JavaScript. On ne manipule donc que le contenu de l'attribut style de la balise
Cependant, le style CSS d'un tag HTML dépend également des feuilles de style déclarées
dans le tag <style> ou dans un fichier externe (déclaré dans un tag <link>.) : par exemple, si on a dans une feuille de style une règle telle que :
DIV.mobile { color: blue }
et que la balise est définie comme :
<DIV id="un" class="mobile">
Si on accède à la propriété style via document.getElementById("un").style.color on n'obtiendra pas "blue"

En javascript, il existe un moyen qui permet d'accéder directement au style d'un tag (style qui résulte donc de l'application de l'attribut style et des feuilles de style). Malheureusement, l'objet qui permet de manipuler les CSS calculées n'est malheureusement pas le même en fonction du navigateur.

Internet Explorer :
var myObject = document.getElementById('header';)
var myStyle = myObject.currentStyle.backgroundColor;

Les Autres :
var myObject = document.getElementById('header');
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.