Javascript 요소 CSS 스타일 코드 가져오기 예제_기본 지식

CSS를 사용하여 페이지를 제어하는 ​​방법에는 인라인 스타일(인라인 스타일), 인라인 스타일, 링크 스타일, 가져오기 스타일의 4가지 방법이 있습니다.

인라인 스타일(인라인 스타일)은 html 태그의 스타일 속성에 작성됩니다(예:

인라인 스타일은

과 같은 스타일 태그에 작성됩니다.

링크 유형은 링크 태그를 사용하여 CSS 파일을 소개하는 것입니다. 예를 들어

가져오기 방법은 import를 사용하여 @import url("test.css")와 같은 CSS 파일을 도입하는 것입니다


자바스크립트를 사용하여 요소의 스타일 정보를 얻으려는 경우 , 가장 먼저 떠오르는 것은 요소 스타일 속성입니다. 그러나 요소의 스타일 속성은 요소의 인라인 스타일만을 나타냅니다. 요소의 스타일 정보 중 일부는 인라인 스타일로 작성되고 일부는 외부 CSS 파일에 작성된 경우 요소의 전체 스타일 정보를 나타낼 수 없습니다. style 속성을 통해 얻을 수 있습니다. 따라서 요소의 스타일 정보를 얻으려면 계산된 요소의 스타일을 사용해야 합니다.

요소의 계산된 스타일을 가져오려면 창 개체의 getCompulatedStyle 메서드를 사용하세요. 이 메서드에는 2개의 매개변수가 있습니다. null 또는 빈 문자열, 의사 클래스(예: before,: after), 두 매개 변수가 모두 필요합니다.

예를 들어보겠습니다

var testDiv = document.getElementById("testDiv");

var ComputedStyle = window.getComputeStyle(testDiv, "");

var 너비 = 계산된Style.width //100px

var 높이 = 계산스타일.높이 //100px

var color = 계산스타일.color; //rgb(255, 0, 0)
[/code]

참고: 획득된 색상 속성은 모두 rgb(#,#,#) 형식으로 반환됩니다.

이때 스타일 정보를 얻기 위해 testDiv.style을 사용한다면 testDiv.style.width는 확실히 비어 있을 것입니다.

IE8 및 이전 버전에서는 getCompulatedStyle 메소드가 구현되지 않지만 IE의 각 요소에는 고유한 currentStyle 속성이 있습니다.

그럼 일반으로 받자

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

var testDiv = document.getElementById("testDiv ");

var styleInfo = window.getCompulatedStyle ? window.getComputeStyle(testDiv, "") : testDiv.currentStyle;

var width = styleInfo.width; //100px;

var height = styleInfo.height; //100px;

var color = styleInfo.color; // rgb(255, 0, 0)

마지막으로 주의할 점은 요소의 계산된 스타일이 읽기 전용이라는 것입니다. 요소의 스타일을 설정하려면 요소의 스타일 속성을 사용해야 합니다(이것이 실제 목적입니다). 요소의 스타일 속성).