DIV 요소 표시 스타일 확인

div 컨테이너가 AJAX를 통해 동적으로 추가되는 div를 호스팅하는 데 사용되는 id="cMsgArea"입니다. 주어진 시간에 보이는 자식 div의 수를 제어해야합니다.DIV 요소 표시 스타일 확인

var theDIV = document.getElementById('cMsgArea'); 
console.log('1)' + theDIV.innerHTML); 
var divNode = theDIV.firstChild; 
console.log('divNode:' + divNode.innerHTML); 
console.log("divNodeDisplay:" + divNode.style.display); 
console.log("divNodeStyle:" + divNode.style); 
while (divNode.style.display !== "block") { 
    divNode = divNode.nextSibling; 
} 
return divNode;

콘솔 결과 :

1)<div style="float:left; clear:left;">[<i>2014.07.05 13:21:09</i>]DreamGuru:(1)(1)</div><div style="float:left; clear:left;">[<i>2014.07.05 13:21:09</i>]DreamGuru:(2)(1)</div><div style="float:left; clear:left;">[<i>2014.07.05 13:21:14</i>]DreamGuru:(1)(12)</div><div style="float:left; clear:left;">[<i>2014.07.05 13:21:14</i>]DreamGuru:(2)(12)</div> si5.js:140 
divNode:[<i>2014.07.05 13:21:09</i>]DreamGuru:(1)(1) si5.js:142 
divNodeDisplay: si5.js:143 
divNodeStyle:[object CSSStyleDeclaration] si5.js:144 
Uncaught TypeError: Cannot read property 'style' of null

질문 divNode는 innerHTML 나에게 올바른 값을 보여주고 있지만 .style.display는 스타일이 null 표시됩니다. 'style.display'값을 얻으려면 어떻게해야합니까?

업데이트 패트릭 에반스가 정확했다. 문제의 잘못된 끝을보고 있었다. 즉, 해결되었지만 컨테이너에 div를 추가하는 코드를 변경하여 명시 적으로 스타일에 display:block이 포함되도록 추가해야한다는 점에 유의해야합니다.

출처

2014-07-05 DreamGuru

여기에서 스타일 정보를 얻을 수 있습니다,이'의미 divNode'은 즉, 널 당신이 형제 자매들의 마지막에 도달했을 때가 있습니다. while (divNode! == null)'과 while while 블록에서 스타일 검사를 수행하십시오. –

divNode가 null이 아닙니다. 콘솔에 innerHTML 값 (si5.js : 142)이 표시됩니다. 나는 while 루프에서 정확히 4 번의 반복을 통해 경고를 받았다. 오류 메시지는 '스타일'이 null임을 나타냅니다. – DreamGuru

네,하지만 처음 'divNode'에서 innerHTML 로그를 작성하고 while lopp에 들어가기 전에. 루프를 반복 할 때마다'divNode'를'nextSibling'이 무엇이든 덮어 쓰게됩니다. 그래서 마지막 형제에 도달하면'nextSibling'은 다음 sibiling이 없기 때문에 null이 될 것이므로, 다음 반복에서'divNode'는 null이 될 것입니다. 이것은 오류가 발생할 때입니다. –

당신이 오류가 당신이 null 객체에 속성 'style`에 액세스하려고하는 것을 나타내는 아니

$("#yourID").prop('style')

출처

2016-10-27 08:54:29

질문에 jQuery가 언급되지 않았습니다. – Mike

DIV 요소 표시 스타일 확인

답변

관련 문제