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下有关dom以及xml节点访问兼容问题
Nov 26 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
vue用BMap百度地图实现即时搜索功能
Sep 26 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
Thinkphp实现短信验证注册功能
2016/10/18 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Thinkphp5.0 框架的请求方式与响应方式分析
2019/10/14 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
JS图片预加载 JS实现图片预加载应用
2012/12/03 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
2020/12/25 Vue.js
python中定义结构体的方法
2013/03/04 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python3实现的字典遍历操作详解
2018/04/18 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
python 格式化输出百分号的方法
2019/01/20 Python
python里dict变成list实例方法
2019/06/26 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
医学专业大学生职业生涯规划书
2014/10/25 职场文书
2014年小学教师工作总结
2014/11/10 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
工作失职检讨书
2015/01/26 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
党性修养心得体会2016
2016/01/21 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python