DOCTYPE break style.display

나는 인자 요소의 자식 노드를 보여 주거나 숨기는 (유산) JS 함수를 가지고있다. img 태그를 숨기려면 mouseover 및 mouseout 이벤트 처리기에 사용됩니다. 기능은 다음과 같습니다DOCTYPE break style.display

function displayElem(elem, value, handlerRoot){ 
try{ 
    var display = 'inline'; 
    if(!value) 
     display = 'none'; 
    if(handlerRoot) 
     elem.style.display = display; 
    var childs = elem.childNodes; 
    for (i = 0; i < childs.length; i++){ 
     if(childs[i].nodeType == Node.ELEMENT_NODE){ 
      childs[i].style.display = display; 
      alert("Node "+childs[i].tagName+" style set to " +childs[i].style.display); 
     } 
    } 
}catch(e){ 
    alert('displayElem: ' + e); 
} 
}

여기

, value 및 handlerRoot 부울 플래그입니다. 대상 HTML 페이지에 doctype이없는 경우이 함수는 완벽하게 작동합니다. 어떤 doctype (strict 또는 transitional)을 추가하면이 문제가 해결됩니다. 경고 표시 스타일은 올바른 값으로 설정되었지만 하위 요소는 표시되지 않습니다.
이 기능이 DOCTYPE과 함께 작동하면 좋을 것입니다.

는

이미지 (elem의 자식 노드) (? 아마 뭔가 여기 잘못)과 같이 초기화 :

var img = new Image(); 
img.style.cssText = 
'background: transparent url("chrome://{appname}/content/dbutton.png") right top no-repeat;' + 
'position: relative;' + 
'height:18px;'+ 
'width:18px;'+ 
'display:none;';

출처

2010-12-28 manuna

어떤 브라우저에서 문제가 발생합니까? –

AFAIK 'cssText' 속성은 IE 전용입니다. – RoToRa

나는 cssText를 1x1 스타일 속성 설정으로 대체했습니다. 동일한 결과입니다. 이처럼 : img.style.background = '투명 URL ("chrome : // {appname} /content/dbutton.png") 오른쪽 상단의 반복 없음'; img.style.position = '상대적'; img.style.height = '18px'; img.style.width = '18px'; img.style.display = '없음'; – manuna

Álvaro G. Vicario에게 감사드립니다. 그는 정확한 답을주지 않았지만 방향은 옳았다. w3c 유효성 검사기를 사용하여 페이지를 검사 한 결과 내 이미지 개체에 src 특성이 없음을 알았습니다. 따라서 img.src = "chrome://{appname}/content/dbutton.png";을 추가하는 것이 도움이되었습니다.

여전히 원래 코드 작성자가 background 대신 src 스타일을 사용했는지 확신 할 수 없습니다 ... 아마도 그 사실은 수수께끼로 남을 것입니다. :)

출처

2010-12-29 09:48:22 manuna

업데이트 :

을 기준으로 문서를 처리 할 때 궁금 모드 (문서에 DOCTYPE이 있음)에서 파이어 폭스는 backward-compat 모드 (DOCTYPE 없음)로 삽입하지 않는 암시 요소를 삽입하기 때문에 이미지는 elem의 직접적인 하위가 아니라 그 대신이 하위의 암시적인 요소를 삽입합니다 그 다음 요소는 elem입니다. 따라서 이미지는 elem.childNodes에 표시되지 않습니다. 디버거에서 코드를 살펴 보는 것이 최선의 방법이지만 루프를 반복하는 각 자식 노드의 tagName에 경고해야합니다. DOM을은 다음과 같습니다 있도록

<table id='theTable'> 
    <tr><td>Hi there</td></tr> 
</table>

이 ... 파이어 폭스하는 tbody 요소를 삽입합니다 :

<table id='theTable'> 
    <tbody> 
     <tr><td>Hi there</td></tr> 
    </tbody> 
</table>

...하지만 그것을하지 않습니다이 마크 업 예를 들어

, DOCTYPE이 붉은 청어가 아니라면 특정 예가 될 것입니다. 왜냐하면 방금 테스트했기 때문에 파이어 폭스는 backward-compat 모드에서도 그렇게합니다. 그러나 아마 당신은 두 개의 약간 다른 문서를 테스트하고 있습니까? 또는 표준 모드에서만 일부 요소를 사용하여 수행 할 수도 있습니다.

원래 :

이 문제를 즉시보고하지,하지만 두 가지 문제 보는가 :

i
함수에 선언되지 않으며, 그래서 당신은 먹이 떨어지는 것을 Horror of Implicit Globals에 귀하의 경고는 정확한 가치를 보여주기 때문에 그것이 왜 문제가되는지 알 수 없습니다.
~~CSS의 url(..)에는 따옴표가 사용되지 않습니다.~~Yes they can, 선택적으로.

출처

2010-12-28 16:16:59

@Gaby : 나는 당신이 논평하는대로 그것을 업데이트했다. 나는 "Add Answer"를 누르고 생각했다. * "당신은 ** 따옴표를 사용할 수 없습니까?"*하고 가서 찾아 보았습니다. :-) –

나는 이것을 다음과 같이지나 가게 할 것이다 : p –

@Gaby : LOL! ... –

JavaScript는 일반 HTML보다는 브라우저에서 생성 된 DOM 트리에서 실제로 작동하지 않습니다. 따라서 DOCTYPE은 JavaScript에 직접적인 영향을 미치지 않지만 브라우저가 잘못된 HTML 및 CSS를 처리하는 방식에 영향을줍니다.

첫 번째 단계는 HTML을 정리하고 유효한지 확인하는 것입니다. 그 태그는 허용 된 장소에서 사용되며 적절히 중첩됩니다. 그러면 생성 된 노드 트리가 렌더링 모드와 상관없이 동일하게 유지됩니다.

파이어 폭스와 같은 브라우저 도구를 사용하여 실제 트리를 검사하고 생각하는 곳에 노드가 있는지 확인할 수도 있습니다.

출처

2010-12-28 16:25:09

DOCTYPE break style.display

답변

관련 문제