JS) getComputedStyle로 스타일 가져오기

카테고리 : 웹 프로그래밍/HTML

함수 사용 방식

var style = window.getComputedStyle(element[, pseudoElt]);

첫번째 매개변수에는 element 선택자가 들어갑니다.

DOM의 객체를 선택하는 방법은 여러 가지입니다.

 

두번째 매개변수인 pseudoElt는 생략가능

Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 이전에는 pseudoElt 매개 변수가 필요했습니다.
다른 주요 브라우저에서는 pseudoElt 매개변수의 값이 null 인 경우에는 생략해도 됩니다.
Gecko는 다른 브라우저의 동작과 일치하도록 업데이트 되었습니다.

 

getComputedStyle은 IE9 이상의 브라우저에서 지원됩니다.

 

HTML

<p>hi098123</p>

<style>
	p {font-size: 50px;}
</style>

JS

var p = document.querySelector('p');
var compStyles = window.getComputedStyle(p);
alert(compStyles.getPropertyValue('font-size')); // 50px

 

compStyles.fontSize 같은 방식으로도 값 선택가능하나 브라우저 호환성은 모르겠습니다.

 

font-size가 아닌 fontSize인 이유? hi098123.tistory.com/256

 

 

 

번외로.

보안문제 찾는게 취미중 하나라 a:visited 같은것에 접근 가능할까 테스트 해봤으나 당연히 안되었습니다. ^^

 

getComputedStyle로 가져올 수 있는 스타일

1. 인라인 스타일 (아래의 코드에서 ... 안에 값들)

<div style="...">

 

2. 스타일시트(CSS) 파일 또는 html style태그

h1, h2 {
  font-size: 2em;
}
<html>
<head>
	...
    <style>
    	h1, h2 {
  			font-size: 2em;
		}
    </sytle>
</head>
<body>
	...
</body>
</html>

주의 : Pseudo 클래스인 객체:hover 등은 스타일 반환 불가

.hi098123 button:hover {
  color: blue; /* getComputedStyle 불가 */
}

 

 

3. JS로 설정한 스타일

document.querySelector('.hi098123_class').style.color="rgb(51, 51, 51)";

var style=window.getComputedStyle(document.querySelector('.hi098123_class')).color;

console.log(style); // 클래스 hi098123_class의 색상인 rgb(51, 51, 51)를 반환

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글 (0개)