Register VML behavior dynamically in IE7

Question

I am trying to draw some shapes in IE7 and I am trying to do it with JavaScript completely. In first place I register the v namespace like this

document.getElementsByTagName('html')[0].setAttribute('xmlns:v', 'urn:schemas-microsoft-com:vml');

and I can see that it is added correctly. Then I try to add a style element and put the VML behavior for the elements like this:

var vstyle = document.createElement('style');
vstyle.innerHTML = 'v\:* {behavior: url(#default#VML);}}';  // Unknown runtime error
document.getElementsByTagName('head')[0].appendChild(vstyle);

I get an Unknown runtime error at the second line in IE6 and IE7. What could the problem be? Is not innerHTML supported? Is there another trick to do this?

Answer 1

You can create style sheet for VML using the below code

document.namespaces.add("v","urn:schemas-microsoft-com:vml");
var style = document.createStyleSheet();
style.addRule('v\\:*', "behavior: url(#default#VML);");

This code will work in IE 7 & above, but I have not tested in IE 6