javascript 스타일 속성이 예상대로 작동하지 않는 이유는 무엇입니까?

<html> 
    <head> 
     <style type="text/css"> 
     #wow{ 
      border : 10px solid red; 
      width: 20px; 
      height: 20px; 

     } 
     </style> 
    </head> 
    <body> 
     <div id="wow"></div> 
     <script> 
     var val = document.getElementById("wow"); 
     alert(val.style.length); 
     </script> 
    </body> 
</html>

이것은 내 코드입니다. val.style.length은 (는) 왜 0입니까? 3 개의 속성을 정의 했으므로 3을 기대합니다.javascript 스타일 속성이 예상대로 작동하지 않는 이유는 무엇입니까?

출처

2013-06-25 dramasea

당신은 #wow {} 안에 3 개의 속성을 설정 했으므로 3이어야한다는 뜻입니까? – BeNdErR

요소에는'style' 속성이 없으므로 요소의 DOM 객체 안에있는 스타일 객체에는 아무 것도 없습니다. –

'style.length'는 인라인 스타일에서만 작동합니다. – j08691

요소의 style 속성은 인라인 스타일 만 반영합니다. 본질적으로 인라인 스타일을 얻는 방법입니다. MDN에서

가에서 온 자들을 요소의 인라인 스타일 속성에 설정에만 CSS 선언을하지 나타내고 있기 때문에 style 속성은, 일반적으로 요소의 스타일에 대한 학습에 유용하지 않다 섹션의 스타일 규칙 또는 외부 스타일 시트와 같은 다른 스타일 규칙을 사용할 수 있습니다.

당신은 window.getComputedStyle(element) 인 요소에 적용된 모든 스타일을 얻을 수 있습니다 :

alert(window.getComputedStyle(val).length);

그러나 이것은 아마도 당신이 원하는 것을하지 않을 것이다,이 요소에 모든 스타일 속성을 제공하기 때문에 , 여전히 기본값 인 경우에도 마찬가지입니다. 브라우저 (Chrome, FWIW)에서는 항상 285을 반환합니다. 놀랄 일이 아닙니다. 브라우저에는 결국 모든 요소에 대한 기본값을 제공하는 "기본 제공"스타일 시트가 있습니다.

출처

2013-06-25 16:24:58 lonesomeday

javascript 스타일 속성이 예상대로 작동하지 않는 이유는 무엇입니까?

답변

관련 문제