JavaScript 개발자 수업 66일차 - CSS 조작

JavaScript CSS 조작

---

JavaScript CSS 조작

[ JS CSS 조작 규칙 ]

  1) style 프로퍼티 사용(Collection)

  2) 태그.style.CSS속성명 = CSS속성값

  - html 방식: <div id='box' style='color: red;'>

  - JavaScript 방식: box.style.color = 'red';

  - 대부분의 속성명은 그대로 사용한다.

  - 'background-color' 같은 경우 캐멀 표기법('backgroundColor')으로 수정해서 사용한다. 

  3) 속성값은 숫자를 제외하고, 대부분 문자열 이다.

  4) JavaScript를 통해서 접근한 CSS의 속성 상태는 인라인 스타일 시트로 선언한 값만 접근이 가능하다. (임베디드, 외부 스타일 시트는 접근이 불가능)

 

[ JS에서 CSS 숫자단위 표기법 ]

  1) 숫자단위를 문자열('')로 표기한다.

<script>
    // 방법1
    test.style.width = '400px';
    test.style.height = '400px';
    test.style.backgorundColor ='blue';
    
    // 방법2
    test.style['width'] = '400px';
    test.style['background-color'] = 'blue';
</script>

 

  2) 문자열로 된 속성값 조작?

<script>
    // 1. 문자열로 변한 속성값을 parseInt로 숫자형으로 변경한다.
    // 2. 숫자형으로 변하여 단위가 사라졌으므로 문자열 단위를 붙여준다.
    test.style.width = parseInt(test.style.width) * 2 + 'px';
</script>

 

  3) 인라인 시트 스타일로 적용이 안된 값도 확인하는 방법

  - getComputedStyle();

<script>
    console.log(window.getComputedstyle(test).width);
</script>

 

[ 숫자 단위 CSS 조작 예제 ]

See the Pen 숫자단위 조작 예제 by yhyuk (@yhyuk) on CodePen.

 

[ 박스 CSS 조작 예제 ]

- onchange: 값이 변경 되고 나서 적용된다.

- oninput: 값이 변경 될때 마다 실시간으로 똑같이 적용된다.

See the Pen 박스 CSS 조작 예제 by yhyuk (@yhyuk) on CodePen.

 

[ 이미지 Position CSS 조작 예제 ]

- position: absolute;

See the Pen 이미지 Position CSS 조작 예제 by yhyuk (@yhyuk) on CodePen.

 

[ JS 다중 클래스 제어 ]

- 자바스크립트에서 CSS속성을 제어하는 방법은 크게 3가지가 있다.

  1) CSS 속성을 하나씩 직접 제어

<script>
    test.style.color = "blue";
    test.style.backgroundColor = "gold";
    test.style.fontFmaily = '궁서';
    test.style.fontSize = '3em';
    test.style.fontStyle = 'italic';
</script>

 

  2) CSS 속성을 집합으로 제어

<style>
    .class1 {
        color: gold;
        background-color: blueviolet;
        font-size: 2em;
        font-weight: bold;
        font-family: '바탕체';
    }
</style>

<script>
    test.setAttribute('class', 'class1');
</script>

 

  3) 다중 클래스 제어

  - className: 단일 클래스 제어 or 정적 클래스 제어

  - classList: 다중 클래스 제어

     1) add()  클래스 추가 메소드

     2) remove() 클래스 제거 메소드

     3) contains() 클래스 확인 메소드

<style>
    .class1 {
        color: gold;
        background-color: blueviolet;
        font-size: 2em;
        font-weight: bold;
        font-family: '바탕체';
    }
    
    .class2 {
        background-color: red;
    }
</style>

<script>
    // className: 1개의 클래스만 가능
    test.className = 'class1';
    
    // classList: 다중(여러개) 클래스 가능
    test.classList.add('class1');
    test.classList.add('class2');
    
    test.classList.remove('class1'); 
    test.classList.remove('class2');
    
    test.classList.contains('class1');
</script>

 

---

MEMO>

# 현재 배우는 JavaSciprt 내용이 바닐라(Vanilla) JS와 똑같다. 바닐라 JS의 의미는 대충 프레임워크, 라이브러리를 쓰지 않고 순수 자바스크립트를 쓴다는 의미이다.

# JavaScript 문법 검사에서 transitional이 기본값으로 적용되어 사용되며, 오류를 허용(무시)한다. 문법을 엄격히 준수하고 싶다면 strict를 쓰면된다. ( JS안에 'use strict'를 쓰면된다. )

# 오늘 CSS 조작을 배운건 이전에 CSS 수업때 배운 문법이라서 예제 위주로 수업을 했다. 기존 CSS에서 자바스크립트를 이용하니 더욱 더 자유롭게? 폭넓게 쓸 수 있는거 같아서 신기했다

# 오늘 받은 문제 한번씩 더 풀기