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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
可编辑下拉框的2种实现方式
Jun 13 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
JavaScript中的高级函数
Jan 04 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
jQuery 白痴级入门教程
2009/11/11 Javascript
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
firebug的一个有趣现象介绍
2011/11/30 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
布同 统计英文单词的个数的python代码
2011/03/13 Python
python 数据的清理行为实例详解
2017/07/12 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
大型会议接待方案
2014/03/01 职场文书
信息管理应届生求职信
2014/03/07 职场文书
个人德育工作总结
2015/03/05 职场文书
2015中学学校工作总结
2015/07/20 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
js前端图片加载异常兜底方案
2022/06/21 Javascript