JavaScript method to dynamically create VML_javascript skills

To use VML, we first need to open a namespace. In the past, dynamic creation was troublesome
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML");
After the emergence of ie8, Microsoft upgraded it in one fell swoop IE6, IE7. The creation method is simpler.
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
Their function is equivalent to changing the HTML tags into the following:

Then call the corresponding CSS hehavior in the style. Static code should look like this:

There are rumors on the Internet that IE8 is not friendly to VML support and wants to abandon VML. The main reason is that the "vml:*" selector is considered illegal by IE8 (which proves that IE is working hard to correct its CSS bug). As a result, people are forced to use joint selectors such as v:line, v:rect, v:roundrect, v:oval to call the relevant CSS hehavior. However, CSS hehavior can be called as long as it is a legal selector, so using a combined selector here is too cumbersome. I wonder if it would be more appropriate to change the class selector? Try it, it's no problem. But it cannot be rendered just like this. Since IE8 has rewritten the kernel, this bug cannot be solved by hasLayout. The official answer is to use display:inline-block, so that you can force it to continue rendering. Later I discovered that display:block also has this effect, but considering the problem of inline elements, I'd better use the official patch. At this point, the problems of opening namespaces and rendering VML elements come to an end.
Let’s look at how to dynamically create a VML element. Since it is non-standard, we will use the non-standard createElement method to create it. We need to concatenate a string as a parameter of createElement, which should contain the namespace and class name.
var createVML = function (tagName) {
return doc.createElement('');
};
Just made a small Tools to see the consequences:

Copy the code The code is as follows:

function(){
if(!window.vml){
window.vml = {};
document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML);display:inline -block;");
if (!document.namespaces.vml && ! "v1"){
document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
}
}
var vml = window.vml = function(name){
return vml.fn.create(name || "rect");
}
vml. fn = vml.prototype = {
create : function(name){
this.node = document.createElement('');
return this;
},
appendTo: function(parent){
if(typeof this.node !== "undefined" && parent.nodeType == 1){
parent.appendChild(this. node);
}
return this;
},
attr : function(bag){
for(var i in bag){
if(bag.hasOwnProperty(i) ){
this.node.setAttribute(i,bag[i])
}
}
return this;
},
css: function(bag){
var str = ";"
for(var i in bag){
if(bag.hasOwnProperty(i))
str = i == "opacity" ? ("filter:alpha(opacity=" bag[i] * 100 ");"):(i ":" bag[i] ";")
}
this.node.style.cssText = str;
return this;
}
}
})()

Finally, three methods of creating VML elements are attached:

Copy code The code is as follows:

var VmlElement = document.createElement('');
var VmlElement = document.createElement('<' tagName '
xmlns="urn:schemas-microsoft.com:vml" class="vml">')
var VmlElement = document.createElement('vml: ' tagName );
VmlElement.className = "vml";//Finally, the namespace must be added as the class name

//Finally, the namespace must be added as the class name