Home > Developer > JavaScript
To use VML, we must first create a namespace. Previously, dynamic creation was troublesome.
Document. namespaces. add ('vml', 'urn: schemas-microsoft-com: vml', "# default # vml ");
After the emergence of ie8, Microsoft upgraded IE6 and IE7 in one breath. The creation method is simpler.
Document. namespaces. add ('vml', 'urn: schemas-microsoft-com: vml ');
Their function is equivalent to making HTML tags look like the following:
<Html xmlns: vml = "urn: schemas-microsoft-com: vml">
Then, the corresponding CSS hehavior is called in the style. Static code should look like this:
<Style type = "text/css">
Vml \: * {behavior: url (# default # VML )}
</Style>
Internet wind transmission IE8 is unfriendly to VML support. The main reason for giving up VML cloud is "vml \: * "This selector is considered illegal by IE8 (the opposite side proves that IE is trying to correct its CSS bug ). As a result, people are forced to call the relevant CSS hehavior using a joint selector like v \: line, v \: rect, v \: roundrect, v \: oval. But as long as it is a valid selector, you can call CSS hehavior, so it is too cumbersome to use the Union selector here. I want to change the class selector. Is it more suitable? There is no problem with this experiment. However, rendering is not possible. Because IE8 has been rewritten to the kernel, this bug cannot be solved by hasLayout. The official answer is to use display: inline-block to force it to continue rendering. Later I found that display: block also has this function, but considering the problem of inline elements, we should use official patches. So far, the question of naming null and rendering VML elements has come to an end.
Let's take a look at how to dynamically create a VML element. Because it is not standard, we use a non-standard createElement method to create it. We need to splice a string as the createElement parameter. It should contain the namespace and class name.
Var createVML = function (tagName ){
Return doc. createElement ('<vml:' + tagName + 'class = "vml"> ');
};
Make a small tool to see the consequences:
Copy codeThe Code is as follows:
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.css Text = str;
Return this;
}
}
})()
Three methods for creating VML elements are attached:
Copy codeThe Code is as follows:
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"; // The namespace must be added as a class name.
// The namespace must be added as the class name.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
