VML_javascript 기술을 동적으로 생성하는 JavaScript 방법

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:direct, v:roundect, 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 || "ret")
}
vml.fn = vml.prototype = {
create : function(name){
this.node = document.createElement(''); >return this;
},
appendTo: function(parent){
if(typeof this.node !== "undefine" && 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" ? =" bag[i] * 100 ");"):(i ":" bag[i] ";")
}
this.node.style.cssText = str;
이것을 반환합니다.
}
}
})()


마지막으로 VML 요소를 생성하는 세 가지 방법이 첨부됩니다.

코드 복사 코드는 다음과 같습니다.

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";//마지막으로 네임스페이스는 클래스 이름으로 추가되어야 합니다.


//마지막으로 네임스페이스는 다음과 같아야 합니다. 클래스 이름으로 추가됨