함수 사용 방식
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)를 반환'웹 프로그래밍 > HTML' 카테고리의 다른 글
| CSS) nth-child, nth-of-type 다양한 활용방법 (2) | 2020.08.04 |
|---|---|
| 웹브라우저에서 와이파이 감지하기 (1) | 2020.08.04 |
| 구글 검색 더 눈에 띄게 꾸미기 FAQ편 (7) | 2020.07.11 |
| JS) AudioContext 음소거(mute) (0) | 2020.07.05 |
| CSS 선택자로 유튜브 링크에 아이콘 넣기 (0) | 2020.06.25 |
| CSS) list-style 다양한 종류 (list-style-type) (3) | 2020.06.25 |
| CSS content 깨지는 현상(주의점) (1) | 2020.06.23 |
| HTML) Link, Script 태그 integrity 옵션 (0) | 2020.06.18 |
저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)
예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.
만약, 본문 공유를 원하신다면 링크 공유를 해주세요
저작권 정책 확인하기링크 공유하기