javascript 요소 CSS 스타일 코드 예제 가져오기

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

인라인 스타일(인라인 스타일)은 <div></div>와 같은 html 태그의 style 속성에 작성됩니다.

인라인 스타일은 <style type="text/css">div{width:100px}</style>과 같은 스타일 태그에 작성됩니다.

링크 유형은 <link href="test.css" type="text/css" rel="stylesheet" />와 같이 링크 태그를 사용하여 CSS 파일을 소개하는 것입니다.

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

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

요소의 계산된 스타일을 가져오려면 창 개체의 getCompulatedStyle 메서드를 사용하세요. 첫 번째 매개변수는 계산된 스타일을 가져올 요소입니다. 클래스(예: before,:after)에는 두 매개변수가 모두 필요합니다.

예를 들어보자

<스타일 유형="텍스트/css">

#testDiv{

테두리:1px 단색 빨간색;

너비: 100px;

높이: 100px;

색상: 빨간색;

}

</style>

<div id="testDiv"></div>

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

var 계산스타일 = window.getCompulatedStyle(testDiv, "");

var 너비 = 계산된 스타일.폭; //100px

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

var 색상 = 계산된 스타일.color; //rgb(255, 0, 0)

[/암호]

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

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

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

그럼 일반으로 받아보자

다음과 같이 코드 코드를 복사합니다.

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

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

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

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

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

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