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 相关文章推荐
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
JavaScript对象引用与赋值实例详解
Mar 15 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript学习笔记之数组随机排序
2016/03/23 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
2016/04/29 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
Vue精简版风格指南(推荐)
2018/01/30 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
JS原形与原型链深入详解
2020/05/09 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[59:15]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.20
2020/11/20 DOTA
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
自我鉴定范文
2013/11/10 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书
春节慰问简报
2015/07/21 职场文书
祝酒词范文
2015/08/12 职场文书