요약:
개발 과정에서 우리는 종종 JS를 통해 DOM 요소의 스타일을 만납니다. DOM 요소의 클래스를 변경하여 다음과 같은 많은 방법이 있습니다. 이제 우리는 DOM 요소의 CSS 스타일을 얻기 위해 Native JS에 대해 논의합니다.
시작하기 전에 먼저 요소에 적용되는 모든 CSS 속성 객체를 얻는 것에 대해 이야기합시다. 스타일이 요소로 설정되지 않으면 브라우저의 기본 스타일이 반환됩니다.
1.ele.Style
DOM을 학습 할 때, 나는 요소 스타일 값이 ele.style을 통해 얻어 지지만 때로는 얻는 것이 노드의 스타일 값이 아니라 빈 값입니다. ELE.Style은 요소 태그의 스타일 속성으로만 작성된 스타일 값을 얻을 수 있으며 <style> </style>에 정의 된 스타일 속성을 얻을 수 없기 때문입니다. <link href = "css.css">
예:
코드 사본은 다음과 같습니다.
var test = document.getElementById ( "테스트");
// 노드의 색상을 가져옵니다
test.style.color;
2. GetComputedStyle ()
GetComputedStyle은 현재 요소의 모든 최종 사용 CSS 속성 값을 얻을 수있는 CSS 속성 값입니다.
구문은 다음과 같습니다.
window.getComputedStyle ( "요소", "의사 클래스");
이 메소드는 두 가지 매개 변수를 수용합니다. 계산 된 스타일의 요소와 의사 요소 문자열 (예 : ": prever")을 얻습니다. 의사 요소 정보가 필요하지 않으면 두 번째 매개 변수는 null 일 수 있습니다. Document.DefaultView.getComputedStyle ( "요소", "의사 클래스")을 통해 사용할 수 있습니다.
예:
코드 사본은 다음과 같습니다.
var test = document.getElementById ( "테스트"),
Demo = Window.getComputedStyle (테스트, NULL);
// 노드의 색상을 가져옵니다
Demo.Color
참고 : Firefox 및 Safari는 색상이 RGB 형식으로 변환됩니다. 테스트 노드에 스타일이없는 경우 스타일을 사용하여 브라우저 기본 스타일 수를보십시오. IE6-8은이 방법을 지원하지 않으므로 다음 방법이 필요합니다.
3. ele .currentStyle
CurrentStyle은 IE 브라우저 자체의 속성입니다. 구문은 Ele.Style과 유사합니다. 차이점은 Emplic.currentStyle이 현재 적용된 요소의 최종 CSS 속성 값을 반환한다는 것입니다 (외부 링크 CSS 파일, 페이지에 포함 된 <Style> 속성 등).
문법:
var style = dom.currentStyle;
예:
코드 사본은 다음과 같습니다.
var test = document.getElementById ( "테스트"),
데모 = test.currentStyle;
// 노드의 색상을 가져옵니다
Demo.Color;
참고 : 포괄적 인 속성 테두리 등의 경우, 즉 정의되지 않은 리턴을 반환합니다. 일부 다른 브라우저는 값을 반환하고 일부는 반환되지 않지만 BorderLeftWidth 리턴 값과 같은 속성.
4. getPropertyValue ()
getPropertyValue CSS 스타일의 직접 속성 이름을 가져옵니다.
구문은 다음과 같습니다.
Window.getComputedStyle (요소, NULL) .GetProperTyValue (속성)
예:
코드 사본은 다음과 같습니다.
var test = document.getElementById ( 'test');
Window.getComputedStyle (테스트, NULL) .GetProperTyValue ( "Background-Color");
참고 : 속성 이름은 낙타 형식을 지원하지 않으며 IE6-8 은이 방법을 지원하지 않으므로 다음 방법이 필요합니다.
5. GetAttribute
getAttribute는 getPropertyValue와 유사하며 한 가지 차이점은 속성 이름의 낙타 형식입니다.
예:
코드 사본은 다음과 같습니다.
var test = document.getElementById ( 'test');
window.getComputedStyle (테스트, NULL) .GetProperTyValue ( "BackgroundColor");
참고 :이 방법은 IE6-8 만 지원합니다
요약:
jQuery css () 메소드 인 기본 작업은 getComputedStyle 및 getPropertyValue 메소드를 사용합니다. 기본 JS 개발을 사용하면 위의 방법을 통해 요소의 값을 얻을 수 있습니다.
다음은 IE, Firefox, Chrome 및 기타 브라우저와 호환하여 요소 스타일을 얻는 방법으로 프로젝트에 적용 할 수 있습니다.
코드 사본은 다음과 같습니다.
함수 getStyle (ele) {
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (ele, null);
}또 다른{
스타일 = ele.currentStyle;
}
리턴 스타일;
}