이 게시물은 JavaScript에서 창 개체의 'getComputedStyle()' 메서드의 목적, 작동 및 사용법을 기록합니다.
JavaScript에서 Window 객체의 'getComputedStyle()' 메서드는 무엇을 합니까?
“ getComputedStyle() ” 메서드는 CSS 속성 및 해당 값의 컬렉션을 포함하는 “CSSStyleDeclaration” 개체를 반환합니다. 대상 HTML 요소 스타일 지정 속성을 계산합니다. 또한 HTML 요소의 특정 부분의 스타일링 속성을 계산하는 데에도 중요한 역할을 합니다.
통사론
창문. getComputedStyle ( 요소 , 의사 요소 )
위 구문에서:
- 창문: 브라우저 창을 나타내는 전역 개체입니다.
- 요소: 스타일을 계산해야 하는 특정 HTML 요소를 지정합니다.
- 의사 요소: 주어진 HTML 요소의 일부(예: 첫 글자, 마지막 글자 등)를 나타냅니다.
다음 섹션에서는 예제를 통해 'getComputedStyle()' 메서드의 실제 설명을 수행합니다.
HTML 코드(CSS 스타일링 포함)
먼저 다음 HTML 코드에 대한 개요를 살펴보십시오.
< 머리 >
< 스타일 >
h3{
글꼴 크기: 20px;
배경색:녹색노란색
}
< / 스타일 >
< / 머리 >
< 몸 >
< h2 > Window 객체의 getComputedStyle() 메서드 사용 < / h2 >
< h3 ID = '데모' > 지정된 HTML 요소의 글꼴 크기는 다음과 같습니다. < / h3 >
< 피 ID = '견본' >< / 피 >
위의 코드 줄에서:
- “ <스타일> ” 태그는 '의 지정된 스타일을 적용합니다. ” HTML 요소.
- '에서 <몸> ” 섹션에는 부제목이 포함되어 있습니다. ”
- 다음으로, id가 '
'인 요소는 데모 ”는 두 번째 소제목을 지정합니다.
- 마지막으로 “ ” 태그는 ID가 “인 빈 단락을 나타냅니다. 견본 ” 대상 요소의 계산된 CSS 속성을 표시합니다.
메모: 이 HTML 코드는 이 게시물의 모든 언급된 예제 전체에서 따릅니다.
예제 1: 'getComputedStyle()' 메서드를 적용하여 HTML 요소의 글꼴 크기 계산
이 예제는 'getComputedStyle()' 메서드를 적용하여 대상 HTML 요소의 글꼴 크기를 가져옵니다.
자바스크립트 코드
명시된 JavaScript 코드를 고려하십시오.
< 스크립트 >const 요소 = 문서. getElementById ( '데모' ) ;
const 객체 = 창문. getComputedStyle ( 요소 )
크기를 보자 = 객체 getPropertyValue ( '글꼴 크기' ) ;
문서. getElementById ( '견본' ) . innerHTML = 크기 ;
스크립트 >
위의 코드 조각에서:
- 변수 선언 ' 요소 ”를 활용하는 “const” 키워드와 함께 getElementById() ” ID를 통해 “
” 요소에 액세스하는 방법 “ 데모 '.
- 그 후 ' getComputedStyle() ” 메서드를 사용하여 가져온 “
” 요소의 CSS 속성을 계산합니다.
- 다음으로 “ 크기 ” 변수는 “ getPropertyValue() ” 적용된 CSS 속성의 값을 반환하는 메서드 “ 글꼴 크기 ” 문자열로.
- 마지막으로 'getElementById()' 메서드는 빈 단락에 접근하고 ' innerHTML ' 재산.
산출
표시된 대로 출력에는 해당 HTML 요소, 즉 '
'에 대해 적용된 글꼴 크기 값이 표시됩니다.
예제 2: 'getComputedStyle()' 메서드를 적용하여 HTML 요소의 배경색 계산
이 예에서 논의된 방법은 특정 HTML 요소의 배경색을 계산하는 데 사용됩니다.
< 스크립트 >const 요소 = 문서. getElementById ( '데모' ) ;
const 객체 = 창문. getComputedStyle ( 요소 )
bgcolor하자 = 객체 getPropertyValue ( '배경색' ) ;
문서. getElementById ( '견본' ) . innerHTML = bgcolor ;
스크립트 >
위의 코드 블록에서 ' getComputedStyle() ” 메서드는 “ 배경색 id가 'demo'인 '
' 요소의 ''를 통해 값을 'rgb'로 반환 getPropertyValue() ' 방법.
산출
출력에는 가져온 HTML 요소의 계산된 배경색이 명확하게 표시됩니다.
결론
자바스크립트는 ' getComputedStyle() ” 대상 HTML 요소의 CSS 스타일 속성을 계산하는 방법. 이 메서드의 계산된 값은 CSS 속성과 해당 값을 포함하는 문자열입니다. HTML 요소의 CSS 속성을 얻기 위해 JavaScript를 사용하여 다양한 방식으로 구현할 수 있습니다. 이 게시물은 JavaScript에서 창 개체의 'getComputedStyle()' 메서드의 목적, 작동 및 사용법에 대한 자세한 보기를 제공했습니다.