3

IE 8 を使用して、JavaScript を使用して 2 つの VML 楕円 (A、B) をページに追加しようとしています。親DIVに追加された楕円はレンダリングされますが、2番目はレンダリングされません。

appendChild(A) の次に appendChild(B) を実行すると、楕円 A がレンダリングされ、B はレンダリングされません。appendChild(B) の次に appendChild(A) を実行すると、楕円 B がレンダリングされ、A はレンダリングされません。

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = Document.getElementById(mydiv);

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = document.createElement("v:oval");
grid.style.left="100px";
grid.style.top="100px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(grid2);
this.container.appendChild(grid);

VML を追加するためのトリックがありませんか?

IE 9 で試してみましたが、結果は同じでした。

社内規定によりIEのみサポートしており、IE8を使用しているユーザーも多いため、現時点ではHTML5 Canvasに切り替えることができません。

提案をありがとう

4

2 に答える 2

3

IE に追加された最初の VML オブジェクトは適切にレンダリングされましたが、その後の VML オブジェクトは小さすぎて表示されませんでした。

このブログ記事は、IE が VML の set/getAttribute をサポートしていないことを判断するのに役立ちました。

http://louisremi.com/2009/03/30/changes-in-vml-for-ie8-or-what-feature-can-the-ie-dev-team-break-for-you-today/

set/getAttribute が機能しないだけでなく、DOM 要素 (例: grid2.style.left="300px") に属性を直接設定しても機能しないことがわかりました。

最終的には、各要素のすべてのマークアップを文字列として生成し、それを別の要素の innerHTML として設定して DOM に挿入することがうまくいったようです。

var html2 = "<v:oval style=\"left: 300px; top: 250px; width: 25pt; height: 75pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker2\"></v:oval>";
var html = "<v:oval style=\"left: 300px; top: 400px; width: 94pt; height: 164pt; position: absolute; display: inline-block;\" fillcolor=\"#0000FF\" id=\"marker\"></v:oval>";

someNode.innerHTML = html2;
someNode2.innerHTML = html;

VML をホストするために使用するダミー ノードを作成しました。

醜いですが、うまくいきました！

于 2012-10-02T21:18:06.197 に答える
0

documentFragmentを使用して 2 番目のノードを追加します。

document.namespaces.add("v","urn:schemas-microsoft-com:vml");

this.container = document.documentElement;
var frag = document.createDocumentFragment();

var grid2 = document.createElement("v:oval");
grid2.style.left=   "300px";
grid2.style.top=    "250px";
grid2.style.width=  "25pt";
grid2.style.height= "75pt";
grid2.style.position="absolute";
grid2.style.behavior="url(#default#VML)";
grid2.style.display="inline-block";
grid2.setAttribute("fillcolor","#FF0000");
grid2.setAttribute("id", "marker2");    

var grid = frag.appendChild(document.createElement("v:oval"));
grid.style.left="300px";
grid.style.top="400px";
grid.style.width="94pt";
grid.style.height="164pt";
grid.style.position="absolute";
grid.style.behavior="url(#default#VML)";
grid.style.display="inline-block";
grid.setAttribute("fillcolor","#0000FF");
grid.setAttribute("id", "marker");

this.container.appendChild(frag);
this.container.appendChild(grid2);
于 2012-01-20T23:05:03.840 に答える