기본 JavaScript는 요소 style_javascript 기술을 얻습니다.

요약:
개발 과정에서 우리는 js를 통해 DOM 요소의 스타일을 얻거나 변경하는 경우를 자주 접하게 됩니다. DOM 요소의 클래스를 변경하는 등 다양한 방법이 있습니다. 이제 DOM 요소의 CSS 스타일을 얻기 위해 기본 js에 대해 논의합니다.

를 가져오는 것이지 설정하는 것은 아닙니다.

시작하기 전에 요소에 최종적으로 적용되는 모든 CSS 속성 객체를 가져오는 의미에 대해 이야기해 보겠습니다. 요소에 설정된 스타일이 없으면 브라우저의 기본 스타일도 반환됩니다.

1.ele.style
DOM을 배울 때 ele.style을 통해 요소 스타일 값을 얻는 것을 보았는데, 가끔 노드의 스타일 값이 아닌 null 값을 얻는 경우도 있었습니다. ele.style은 요소 태그의 style 속성에 작성된 스타일 값만 얻을 수 있고 및 로드된 스타일 속성

예:

코드 복사 코드는 다음과 같습니다.

         var test = document.getElementById("test");
//노드의 색상을 구합니다
         test.style.color;

2. getCompulatedStyle()
GetCompulatedStyle은 현재 요소의 최종 CSS 속성 값을 모두 가져올 수 있는 메서드입니다.

구문은 다음과 같습니다.

window.getCompulatedStyle("요소", "의사 클래스");

이 메소드는 두 개의 매개변수, 즉 계산된 스타일을 얻기 위한 요소와 의사 요소 문자열(예: ":before")을 허용합니다. 의사 요소 정보가 필요하지 않은 경우 두 번째 매개변수는 null일 수 있습니다. document.defaultView.getCompulatedStyle("Element", "Pseudo-class");

를 사용할 수도 있습니다.

예:

코드 복사 코드는 다음과 같습니다.

         var test = document.getElementById("test"),
          데모 = window.getCompulatedStyle(test, null)
//노드의 색상을 구합니다
데모.컬러

참고: Firefox 및 Safari는 색상을 RGB 형식으로 변환합니다. 테스트 노드에 스타일이 없으면 style.length를 사용하여 브라우저 기본 스타일 수를 확인하세요. IE6-8에서는 이 방법을 지원하지 않으므로 다음 방법을 사용해야 합니다

3.ele.currentStyle
currentStyle은 IE 브라우저 자체의 속성입니다. 구문은 ele.style과 유사합니다. 차이점은 element.currentStyle이 현재 요소에 적용된 최종 CSS 속성 값(외부 링크 CSS 파일 및 포함된