JavaScript 动态创建 VML 元素的方法与兼容处理

VML 命名空间与 IE8 兼容处理

使用 VML 前需先注册命名空间。早期动态创建较为繁琐，需执行：document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML");。随着 IE8 发布，微软升级了 IE6 和 IE7，创建方式简化为：document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');。这相当于在 HTML 根元素中声明：xmlns:vml="urn:schemas-microsoft-com:vml"。接着需在样式中调用对应的 CSS behavior，静态代码示例为：<style type="text/css">vml\:* { behavior: url(#default#VML) }</style>。尽管网上有 IE8 不支持 VML 的说法，实则是 IE8 将“vml\:*”选择器视为不合法（这反而证明 IE 在修正 CSS bug）。因此，人们被迫使用 v\:line、v\:rect、v\:roundrect、v\:oval 等联合选择器来调用 CSS behavior，但这过于繁琐。尝试使用类选择器并无问题，但仅靠此无法渲染，因为 IE8 重写了内核，hasLayout 无法解决此问题。官方建议添加 display:inline-block 以强制渲染，经测试 display:block 也有效，但为稳妥起见，采用官方推荐的 display:inline-block。至此，命名空间开辟与 VML 元素渲染问题基本解决。接下来探讨动态创建 VML 元素，由于非标准，需使用非标准的 createElement 方式。我们需要拼接包含命名空间与类名的字符串作为参数：var createVML = function (tagName) { return doc.createElement('<vml:' + tagName + ' class="vml">'); }; 下面展示一个简单工具的实现效果。

 
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('<vml:' + name + ' class="vml">');
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;
} 
} 
})() 

动态创建 VML 元素的多种方法

最后附上三种创建 VML 元素的方法：

 
var VmlElement = document.createElement('<vml:' + tagName + ' class="vml">');
通过 document.createElement 拼接标签名，并指定命名空间属性。
在字符串中指定 xmlns 属性，确保命名空间正确。
var VmlElement = document.createElement('vml:' + tagName );
必须将命名空间作为类名添加，

确保命名空间以类名形式存在。