ホームページ >ウェブフロントエンド >jsチュートリアル >VML_javascript スキルを動的に作成する JavaScript メソッド

VML_javascript スキルを動的に作成する JavaScript メソッド

WBOY
WBOYオリジナル
2016-05-16 18:44:321162ブラウズ

VML を使用するには、まず名前空間を開く必要があります。以前は動的作成が面倒でしたが、
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml', "#default#VML"); ie8 の登場後は、 MicrosoftはIE6、IE7を一気にアップグレードした。作成方法はもっと簡単です。
document.namespaces.add('vml', 'urn:schemas-microsoft-com:vml');
これらの機能は、HTML タグを次のように変更するのと同等です:

次に、スタイル内の対応する CSS hehavior を呼び出します。静的コードは次のようになります。
インターネット上では、IE8 が VML サポートに好意的ではなく、VML を放棄しようとしているという噂があります。その主な理由は、「vml:*」セレクターが IE8 によって違法であるとみなされていることです (これは、IE が CSS バグの修正に熱心に取り組んでいることを証明しています)。 )。その結果、関連する CSS 動作を呼び出すには、v:line、v:rect、v:roundrect、v:oval などのジョイント セレクターを使用する必要があります。ただし、CSS hehavior は正当なセレクターであれば呼び出すことができるため、ここで結合セレクターを使用するのは面倒すぎます。クラスセレクターを変更した方が適切なのでしょうか?試してみてください、問題ありません。ただし、このままではレンダリングできません。IE8 ではカーネルが書き換えられているため、このバグは hasLayout では解決できません。公式の答えは、display:inline-block を使用して、レンダリングを強制的に続行できるようにすることです。後でdisplay:blockにもこの効果があることが分かりましたが、インライン要素の問題を考えると公式パッチを使用した方が良いでしょう。この時点で、名前空間を開いて VML 要素をレンダリングするという問題は終了します。
VML 要素を動的に作成する方法を見てみましょう。これは非標準であるため、非標準の createElement メソッドを使用して作成します。 createElement のパラメータとして文字列を連結する必要があります。これには名前空間とクラス名が含まれている必要があります。
var createVML = function (tagName) {
return doc.createElement('');
小さなツールを作成しました。結果を確認するには:



コードをコピーします コードは次のとおりです: 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(''); >これを返します;
},
appendTo: function(parent){
if(typeof this.node !== "未定義" &&parent.nodeType == 1){
parent.appendChild( this.node);
}
return this;
},
attr : function(bag){
for(bag.hasOwnProperty() i) ){
this.node.setAttribute(i,bag[i])
}
}
これを返す;
},
css: function(bag){
var str = ";"
for(var i in Bag){
if(bag.hasOwnProperty(i))
str = i == "opacity" ("filter:alpha(opacity ? =" バッグ[i] * 100 ");"):(i ":" バッグ[i] ";")
}
this.node.style.cssText = str;
return this;
}
}
})()


最後に、VML 要素を作成する 3 つのメソッドが添付されています:




コードをコピーします


コードは次のとおりです:
var VmlElement = document.createElement('') ; var VmlElement = document.createElement('<' tagName ' xmlns="urn:schemas-microsoft.com:vml" class="vml">') var VmlElement = document. createElement('vml: ' tagName ); VmlElement.className = "vml";//最後に、名前空間をクラス名として追加する必要があります

//最後に、名前空間はクラス名として追加
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。