JavaScript 动态创建VML的方法


Posted in Javascript onOctober 14, 2009

要使用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标签搞成下面这个样子:
<html xmlns:vml="urn:schemas-microsoft-com:vml">
接着就是在样式中调用对应的CSS hehavior。静态代码应该是这个样子:
<style type="text/css">
vml\:* { behavior: url(#default#VML) }
</style>
网上风传IE8对VML支持不友好,要放弃VML云云,主要原因在于“vml\:*”这个选择器被IE8认为不合法(反面证明IE在努力修正其 CSS bug)。由此,人们被迫利用v\:line, v\:rect, v\:roundrect, v\:oval这样子的联合选择器来调用相关的CSS hehavior。不过只要是合法选择器就可以调用CSS hehavior,因此这里用联合选择器实在太累赘了。我想换类选择器是否更合适点呢?试验一下,是无问题的。但仅仅是这样是渲染不出来的,由于IE8已 经重写了内核,因此此bug不是hasLayout可以解决的。官方给出答案是使用display:inline-block,这样就可以强逼它继续渲染了。后来我又发现display:block也有此功效,但考虑到内联元素的问题,还是用官方的补丁吧 。至此,开辟命名空与与渲染VML元素的问题就告一段落。
再来看如何动态创建VML元素,由于是非标准,我们就用非标准的createElement方式来创建它。我们需要拼接一个字符串,作为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元素的方法:
var VmlElement = document.createElement('<vml:' + tagName + ' class="vml">'); 
var VmlElement = document.createElement('<' + tagName + ' 
xmlns="urn:schemas-microsoft.com:vml" class="vml">') 
var VmlElement = document.createElement('vml:' + tagName ); 
VmlElement.className = "vml";//最后必须把命名空间当作类名加上

//最后必须把命名空间当作类名加上
Javascript 相关文章推荐
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 Javascript
javascript动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
一个基于jquery的文本框记数器
Sep 19 Javascript
关于jQuery中.attr()和.prop()的问题探讨
Sep 06 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
a标签置灰不可点击的实现方法
Feb 06 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 #Javascript
jQuery 标题的自动翻转实现代码
Oct 14 #Javascript
JavaScript 替换Html标签实现代码
Oct 14 #Javascript
JavaScript null和undefined区别分析
Oct 14 #Javascript
JavaScript iframe的相互操作浅析
Oct 14 #Javascript
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 #Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 #Javascript
You might like
php自动注册登录验证机制实现代码
2011/12/20 PHP
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
xmlhttp缓存清除的2种解决方法
2013/12/13 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JQuery以JSON方式提交数据到服务端示例代码
2014/05/05 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
JS通过位运算实现权限加解密
2018/08/14 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
python 利用matplotlib在3D空间绘制二次抛物面的案例
2021/02/06 Python
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
计算机专业毕业生自荐信
2013/12/31 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
小区消防演习方案
2014/02/21 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
师范生见习报告范文
2014/11/03 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
申报优秀教师材料
2014/12/16 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
2015年国庆节寄语
2015/08/17 职场文书