[Javascript] 스타일(CSS) 다루기

깡냉쓰 2018. 12. 17. 22:38

728x90

스타일(CSS) 다루기

Style 속성

Style 속성은 엘리먼트의 중요한 속성이다.

HTML DOM 엘리먼트에는 style 프로퍼티가 있기 때문에 엘리먼트의 스타일과 관련된 정보를 얻으려면 element.style.color와 같은 식으로 프로퍼티를 사용할 수 있다. 하지만 그 엘리먼트에 지정한 원본 style 스타일 문자열 값을 얻고 싶다면 다른 방법이 필요하다.

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>
Colored by Color Scripter
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 프로퍼티를 이용하면 실제 엘리먼트의 크기를 알 수 있다. (하지만 패딩을 포함하고 있다는 점을 유념해야한다.)

728x90