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 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
JavaScript注入漏洞的原理及防范(详解)
Dec 04 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
js+html5实现半透明遮罩层弹框效果
Aug 24 Javascript
浅析Vue 防抖与节流的使用
Nov 14 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
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
2013/12/13 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
Python实现端口检测的方法
2018/07/24 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
python多线程抽象编程模型详解
2019/03/20 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python实现简单的tcp 文件下载
2020/09/16 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
分厂厂长岗位职责
2013/12/29 职场文书
药剂专业毕业生求职信
2014/06/24 职场文书
幼儿园教师工作总结2015
2015/04/02 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
成功的商业计划书这样写才最靠谱
2019/07/12 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js