추신 : 스타일을 설정하지 않고 스타일을 얻는 것입니다. 요소에 대한 스타일 값이 설정되지 않으면 브라우저가 제공 한 기본값이 반환됩니다. (포럼 정렬)
1. element.Style : 요소 태그의 스타일 속성으로 작성된 스타일 값 만 얻을 수 없습니다. <style> </style>에 정의 된 스타일 속성은 <link href = "css.css">를 통해로드됩니다.
코드 사본은 다음과 같습니다.
var ele = document.getElementById ( 'ele');
ele.style.color; // 색상을 얻습니다
2. Window.getComputedStyle () : 현재 요소의 모든 최종 CSS 속성 값을 얻을 수 있습니다.
코드 사본은 다음과 같습니다. window.getComputedStyle ( "요소", "의사 클래스");
이 메소드는 두 가지 매개 변수를 수용합니다. 계산 된 스타일의 요소와 의사 요소 문자열 (예 : ": prever")을 얻습니다. 의사 요소 정보가 필요하지 않으면 두 번째 매개 변수는 null 일 수 있습니다. Document.DefaultView.getComputedStyle ( "요소", "의사 클래스")을 통해 사용할 수 있습니다.
코드 사본은 다음과 같습니다.
var ele = document.getElementById ( 'ele');
var styles = window.getComputedStyle (ele, null);
스타일 .color; // 색상을 얻습니다
Style.length를 사용하여 브라우저 기본 스타일 수를 볼 수 있습니다. IE6-8은이 방법을 지원하지 않으며 다음 방법을 사용해야합니다. Firefox 및 Safari의 경우 색상이 RGB 형식으로 변환됩니다.
3. Element.CurrentStyle : IE의 특별한 경우, 현재 적용된 요소의 최종 CSS 속성 값을 반환합니다 (외부 링크 CSS 파일, <Style> 페이지에 포함 된 속성 등).
코드 사본은 다음과 같습니다.
var ele = document.getElementById ( 'ele');
var 스타일 = ele.currentStyle;
스타일 .color;
참고 : 포괄적 인 속성 테두리 등의 경우, 즉 정의되지 않은 리턴을 반환합니다. 일부 다른 브라우저는 값을 반환하고 일부는 반환되지 않지만 BorderLeftWidth 리턴 값과 같은 속성.
4. getPropertyValue () : CSS 스타일의 직접 속성 이름 가져 오기
코드 사본은 다음과 같습니다.
var ele = document.getElementById ( 'ele');
window.getComputedStyle (ele, null) .getProperTyValue ( 'color');
참고 : 속성 이름은 낙타 형식을 지원하지 않으며 IE6-8 은이 방법을 지원하지 않으므로 다음 방법이 필요합니다.
5. getAttribute () : getPropertyValue와 유사하게, 한 가지 차이점은 속성 이름의 낙타 형식입니다.
코드 사본은 다음과 같습니다.
var test = document.getElementById ( 'test');
window.getComputedStyle (테스트, NULL) .GetProperTyValue ( "BackgroundColor");
참고 :이 방법은 IE6-8 만 지원합니다.
다음 스타일 획득 방법은 IE, Chrome, Firefox 등과 호환됩니다.
코드 사본은 다음과 같습니다.
함수 getStyle (ele) {
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (ele, null);
}또 다른{
스타일 = ele.currentStyle;
}
리턴 스타일;
}
jQuery에서 CSS ()는 일반적으로 스타일 속성을 얻는 데 사용되며 기본 작업은 getComputedStyle 및 getPropertyValue 메소드를 적용합니다.