2011-11-19 4 views
0

저는 파이어 폭스 확장 프로그램에서 일하고 있습니다. 내가해야 할 일 중 하나는 dom에 요소를 추가하는 것입니다. 나는이 요소가 xul.css에서 어떤 스타일을 상속 받았다는 점을 제외하고는 아무런 문제가 없다는 것을 제외하고는 (나는 원래 피할 수있는 스타일을 대신 사용한다.)브라우저 확장에 요소를 만들면 브라우저 CSS가 상속됩니까?

코드는 다음과 같다. 매우 간단합니다 :

var span = document.createElement('span'); 
node.appendChild(span) 

와 불을 지르고와 나는 그것이 내가 요소 위의 CSS를 사용하지를 만들 수있는 방법 그래서

* { 
    -moz-box-sizing: border-box; 
    -moz-user-focus: ignore; 
    -moz-user-select: -moz-none; 
    display: -moz-box; 
} 

를 사용하고 있음을 알 수 있습니까?

감사

답변

1

' HTML 요소가 아니라 XUL 요소를 만들었 기 때문입니다. 귀하의 경우 document은 XUL 문서 (브라우저 윈도우의 문서)이고 생성 된 요소의 기본 네임 스페이스는 http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul입니다.

node.ownerDocument.createElementNS("http://www.w3.org/1999/xhtml", "span"); 
+0

그게 정확히 문제였습니다. 고마워요! – Dan

0

여러 스타일 시트가있을 때 하나가 다른를 대체 할 수 있습니다. 위의 코드는 섹션이나 전체 페이지의 모든 요소에 특정 스타일을 적용하는 데 사용됩니다. 이렇게하는 유일한 방법은 스팬 요소를 만든 후에 자신 만의 스타일을 적용하는 것입니다. display : block;

당신은

span.setAttribute('id',"MyElement"); 
$('#MyElement').removeClass('*'); 

를 만든 후 다음 JQuery와 스크립트를 사용하여 스타일을 제거하려고 할 수 있습니다 또는 당신이 이상


span.setAttribute('id',"MyElement"); 
document.getElementById("MyElement").className = "predifinedClass"; 

또는 JQuery와

로를 타고해야합니다
span.setAttribute('id',"MyElement"); 
$('#MyElement').addClass('MyClass'); 
----- OR ----- 
$('#MyElement').css('display','block'); // to specify 1 css rule 
+0

'xul.css' 하나입니다 : 당신은 명시 적으로 HTML 네임 스페이스를 지정할 수

node.ownerDocument.createElement("span"); 

: 가능하면 항상은 삽입 될 문서의 요소를 만들어야합니다 브라우저에 내장 된 스타일 시트를 문제는 그것을 재정의하는 것이 아니라 우선 적용하지 않는 것입니다. –

관련 문제