반응형
스타일(CSS) 다루기
Style 속성
Style 속성은 엘리먼트의 중요한 속성이다.
HTML DOM 엘리먼트에는 style 프로퍼티가 있기 때문에 엘리먼트의 스타일과 관련된 정보를 얻으려면 element.style.color와 같은 식으로 프로퍼티를 사용할 수 있다. 하지만 그 엘리먼트에 지정한 원본 style 스타일 문자열 값을 얻고 싶다면 다른 방법이 필요하다.
<div style=“color:red”></div>
Color:red 라는 원본 문자열을 얻고싶으면 어떻게 할까?
IE => element.style.cssText // 테스트결과 다른 브라우저에서도 사용 가능
대부분의 브라우저 => getAttribute(“style”)를 사용한다.
내 스타일은 어디있지?
아래 테스트 코드를 살펴보자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div {font-size : 1.8em; border : 0 solid gold;} // 페이지 내의 스타일 시트선언 </style> </head> <body> <div style="color:#000"; title="div exam">div example 입니다.</div> </body> <script> window.onload = function(){ var div = document.getElementsByTagName("div")[0]; console.log(div.style.color == 'rgb(0, 0, 0)' || div.style.color == "#000"); // true console.log(div.style.fontSize == "1.8em"); // false console.log(div.style.borderWidth == "0"); // false div.style.borderWidth = "4px"; console.log(div.style.borderWidth == "4px"); // true } </script> </html> | cs |
위 테스트를 보면 알 수 있듯이, style 객체는 CSS 스타일시트로부터 상속한 스타일 정보는 style객체가 알지 못한다.
따라서 style 프로퍼티에 접근하면 element에 적용된 모든 스타일 값을 알 수 있는 건 아니다..
(알아둬야할 것 : 엘리먼트의 style 프로퍼티에 지정한 값은 스타일시트로부터 상속한 값보다 우선한다.)
여기서 주목할 만한 점은, CSS에서는 글꼴 크기 프로퍼티 이름을 font-size로 지정했지만 스크립트에서는 fontSize로 참조했다는 점이다.
스타일 프로퍼티 이름
CSS속성 이름은 하이픈(-)으로 구분된 한 개 이상의 단어로 구성된다.(font-weight, font-size, background-color ..)
하지만 자바스크립트에서 프로퍼티 이름으로 사용할 “문자열”에는 하이픈을 사용할 수 있지만, 점(.) 연산자를 사용하여 접근하는 프로퍼티의 경우, 이 프로퍼티 이름에 하이픈을 포함할 수는 없다.
var color = element.style[“font-size”] // 유효
var color = element.style.font-size; // 유효하지 않음 (자바스크립트 파서는 하이픈을 뺄셈 연산자로 간주하기 때문)
해당 CSS프로퍼티 이름은 CSS에서 사용하는 일반적인 형식이 아니라 camel 표기법을 사용한다. 따라서 font-size = fontSize, background-color => backgroundColor가 된다.
높이와 너비 측정하기
height와 width 스타일 프로퍼티들은 값을 지정하지 않으면 auto를 기본값으로 가진다. 그렇기에 height와 width속성 문자열에 명시적으로 값을 지정하지 않으면 엘리먼트의 정확한 크기를 얻을 수 없다.
하지만, offsetHeight와 offsetWidth 프로퍼티를 이용하면 실제 엘리먼트의 크기를 알 수 있다. (하지만 패딩을 포함하고 있다는 점을 유념해야한다.)
반응형
'프로그래밍 노트 > JAVASCRIPT' 카테고리의 다른 글
| [Javascript] callee 프로퍼티 (0) | 2018.12.20 |
|---|---|
| [Javascript] 익명함수 (0) | 2018.12.17 |
| [Javascript] 속성(attribute)와 프로퍼티(property)의 차이 (0) | 2018.12.03 |
| [Javascript] 함수의 호출_4 (apply(), call() 메서드 사용) (0) | 2018.11.28 |
| [Javascript] 함수의 호출_3 (생성자로 호출, 생성자의 기능) (0) | 2018.11.27 |
