JavaScript_javascript 팁에서 스타일을 얻기 위한 기본 방법 요약

ps: 스타일을 설정하는 것이 아니라 스타일을 얻는 것입니다. 요소에 스타일 값이 설정되지 않은 경우 브라우저에서 제공한 기본값이 반환됩니다. (포럼 준비)

1. element.style:은 요소 태그의 style 속성에 작성된 스타일 값만 얻을 수 있으며, 로드된 스타일 속성

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

var ele = document.getElementById('ele');
ele.style.color; //색상 가져오기

2. window.getCompulatedStyle():은 현재 요소의 최종 CSS 속성 값을 모두 가져올 수 있습니다.

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

window.getCompulatedStyle("Element", "Pseudo-class");

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

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

var ele = document.getElementById('ele');
var styles = window.getCompulatedStyle(ele,null);
styles.color; //색상 가져오기

style.length를 통해 브라우저 기본 스타일 수를 볼 수 있습니다. IE6-8에서는 이 방법을 지원하지 않으므로 이후 방법을 사용해야 합니다. Firefox 및 Safari의 경우 색상이 RGB 형식으로 변환됩니다.

3. element.currentStyle: IE 전용, 현재 요소에 적용된 최종 CSS 속성 값을 반환합니다(외부 링크 CSS 파일, 페이지에 포함된

4. getPropertyValue(): CSS 스타일의 직접 속성 이름을 가져옵니다

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

var ele = document.getElementById('ele');
window.getCompulatedStyle(ele,null).getPropertyValue('color');

참고: 속성 이름은 Camel Case 형식을 지원하지 않습니다.
다음 방법을 사용해야 합니다.

5. getAttribute(): 은 getPropertyValue와 유사합니다. 유일한 차이점은 속성 이름 의 카멜 케이스 형식입니다.

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

var test = document.getElementById('test');
window.getCompulatedStyle(test, null).getPropertyValue("BackgroundColor");

참고: 이 방법은 IE6-8만 지원합니다.
다음과 같은 스타일 획득 방법은 IE, Chrome, FireFox 등과 호환됩니다.

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

함수 getStyle(ele) {
var 스타일 = null;
     
If(window.getCompulatedStyle) {
          스타일 = window.getCompulatedStyle(ele, null);
}그밖에{
          스타일 = ele.currentStyle;
}
     
반환 스타일;
}

JQuery에서 css()는 일반적으로 스타일 속성을 얻는 데 사용되며 기본 작업은 getCompulatedStyle 및 getPropertyValue 메서드를 사용합니다.