当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 动态创建VML的方法

Javascript
IE8 原生JSON支持
iframe 自适应高度[在IE6 IE7 FF下测试通过]
javascript 清除输入框中的数据
IE和FireFox(FF)中js和css的不同
JavaScript asp.net 获取当前超链接中的文本
用JavaScript页面不刷新时全选择，全删除（GridView）
JavaScript获取GridView选择的行内容
javaScript 读取和设置文档元素的样式属性
js select 控制实现代码
javascript 类方法定义还是有点区别
jQuery 绝对入门
网页开发中的容易忽略的问题 javascript HTML中的table
childNodes 用法两例
js 只能输入数字和小数点的文本框改进版
javascript 09年最新版的省市联动
jquery 实现的全选和反选
js 拖拽翻页实现代码
保证JavaScript和Asp、Php等后端程序间传值编码统一
JavaScript 无符号右移赋值操作
JavaScript 无符号右移运算符

No. « 132 133 134 135 »

技术文章搜索

关键字

Javascript 中的 JavaScript 动态创建VML的方法

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 295 ::
收藏到网摘: n/a

JavaScript 动态创建VML的方法，需要的朋友可以参考下。

要使用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";//最后必须把命名空间当作类名加上

//最后必须把命名空间当作类名加上