CSS 코드는 DOM 객체의 .style 속성을 초기화합니까?

배경 : jsfiddle here를 참조하십시오CSS 코드는 DOM 객체의 .style 속성을 초기화합니까?

나는 간단한 DOM 이벤트 예를 만들었습니다.

<div id="squirrel" onmouseover="toggleFloat(this)"> 
    <p>Click me!</p> 
</div> 

<script> 
    function toggleFloat(ele){ 
     var current = ele.style.cssFloat; 
     console.log("cssFloat: "+current); 
     if(current==="left") 
      ele.style.cssFloat="right"; 
     else 
      ele.style.cssFloat="left"; 
    } 
</script>

동반 CSS :

#squirrel{ 
    float:left; 
}

이상한 행동을 발견하고는 다음 DOM에서 cssFloat 속성에 대한 # 다람쥐의 초기 값은 ""이었다. (개발자 콘솔을 열어 두 번째 이벤트가 발생할 때까지 #squirrel이 움직이지 않는다는 사실을 확인하십시오.)

내 질문 : CSS 코드가 DOM 개체의 cssFloat 속성을 초기화하지 않았습니까? 그 문제에 대한 스타일 속성이나 ...

출처

2016-08-30 Andrew

요소의'style' 속성은'style' 속성으로 정의 된 인라인 스타일을 나타냅니다. 그것들은 CSS 파일에 정의 된 CSS 규칙에 의해 수정되지 않습니다. 브라우저는 이러한 규칙과 인라인 스타일을 기반으로 최종 스타일을 계산합니다. 최종 계산 된 스타일은 ['MDN : Window.getComputedStyle()'] (https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) –

을 사용하여 검색 할 수 있습니다. 스타일을 인라인으로 처리 [예상대로 작동] (https://jsfiddle.net/vgwfL3L1/6/). (답변을 추가 할 수 있도록 귀하의 의견을 게시하십시오.) – Andrew

요소의 속성은 style 특성으로 정의 된 인라인 스타일을 나타냅니다.

사용자의 css 파일에 정의 된 CSS 규칙에 의해 수정되지 않습니다. 브라우저는 이러한 규칙과 인라인 스타일을 기반으로 최종 스타일을 계산합니다.

최종 계산 된 스타일은 일반적으로 인라인 스타일 속성을 사용하지 않도록해야합니다 MDN: Window.getComputedStyle()

당신을 사용하여 검색 할 수 있습니다. 일반적으로 class을 사용하여 특정 요소의 모양을 조작해야합니다. 또한 인라인 스타일을 동적으로 변경하기 위해 style 속성을 사용하면 주변에 실제로 길이없는 경우에만 사용해야합니다. 요소를 동적으로 이동해야하는 경우 자세한 내용은 Inline tags vs. inline css properties의 대답을 읽어 볼 수도 있습니다.

출처

2016-08-30 19:28:01

CSS 결코은 DOM을 수정합니다.

DOM의 'style'속성은 스타일 시트에 정의 된 CSS와 병합/덮어 쓰기됩니다.

출처

2016-08-30 18:22:23 user2864740

CSS 코드는 DOM 객체의 .style 속성을 초기화합니까?

답변

관련 문제