JavaScript et VML - Comment rajouter un namespace et un regle CSS dynamiquement
Pour utiliser la technologie VML dans nos pages HTML il est nécessaire de rajouter 2 choses : un namespace XML et une régle CSS, on se retrouve donc avec une page qui posséde ces éléments :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Untitled Page</title>
<style type="text/css">
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<v:shape id="shape1" style="width:400px; height:400px;" coordSize="100,100" fillColor="red" path="m75,79 l97,84,12,72,74,53,97,50 xe">
</body>
</html>
Si l'on veut rajouter du VML dynamiquement (via JavaScript) il est intéressant d'ajouter ces 2 lignes via du code afin de garder une source HTML "propre". Ces quelques lignes le font très bien :-) Tout d'abord je vérfie que le navigateur est bien IE (car VML fonctionne seulement sur IE :-() et regarde si le document n'a pas le namespace vml dans ce cas je le rajoute et créé une règle CSS tout en ayant créé une feuille de style si le document n'en avait pas.
if (Sys.Browser.agent == Sys.Browser.InternetExplorer && !document.namespaces['vml']){
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
var styleSheet = (document.styleSheets.length > 0) ? document.styleSheets[0] : document.createStyleSheet();
styleSheet.addRule('vml\\:*', 'behavior:url(#default#VML)');
}
Vous pouvez alors créer un nouvel élément VML de cette façon.
var graphicElement = document.createElement('vml:shape');
document.body.appendChild(graphicElement);
with(graphicElement.style){
position = 'absolute';
top = '0';
left = '0';
width = '100px';
height = '100px';
}
graphicElement.coordSize.x = 100;
graphicElement.coordSize.y = 100;
graphicElement.fillColor = 'red';
graphicElement.path = 'm75,79 l97,84,12,72,74,53,97,50 xe'
Pour en savoir un peu plus sur le VML je vous conseille l'excellent tuto d'Aurélien : Tutorial VML