HTML 스타일,클래스 제어 04.웹페이지 시작하기

CSS 제어

획득한 객체 CSS속성 접근

// 내용 적용하기
mytag.style.css관련_프로퍼티 = "css속성 값";
// 적용된 내용 조회하기
var css = mytag.style.css관련_프로퍼티

• Javascript 객체로 HTML요소를 가져오면 style이라는 프로퍼티(속성)객체가 내장된다.
• style객체는 모든 CSS속성을 프로퍼티로 갖고있다.
• css적용은 스네이크표기법이 아닌 카멜표기법으로 변환하여 적용한다.
  ex)font-family -> fontFamily

예제

<script>
  document.querySelector("#btn1").addEventListener('click', function (e) {
            //id값이 box인 요소
            const box = document.getElementById("box");
            //글자색상을 파라미터로 전달된 값으로 설정함
            box.style.color = '#ff0000';
        });

        //위 구문을 축약한 화살표 함수 형태
        document.querySelector("#btn2").addEventListener('click', (e) => document.getElementById('box').style.color = '#00ff00');
        document.querySelector("#btn3").addEventListener('click', (e) => document.getElementById('box').style.color = '#00ff');
        document.querySelector("#btn4").addEventListener('click', (e) => document.getElementById('box').style.backgroundColor = 'red');
        document.querySelector("#btn5").addEventListener('click', (e) => document.getElementById('box').style.backgroundColor = 'green');
        document.querySelector("#btn6").addEventListener('click', (e) => document.getElementById('box').style.backgroundColor = 'blue');
        document.querySelector("#btn7").addEventListener('click', (e) => {
            /* 단위를 표시해야하는 경우도 따옴표로 감싸서 문자열 처리를 해야한다. */
            document.getElementById('box').style.width = '50%'
        });
        document.querySelector("#btn8").addEventListener('click', (e) => document.getElementById('box').style.width = 'auto');

획득한 객체의 클래스 접근

mytag.classList.add(name);      // 클래스 추가 
mytag.classList.remove(name);   // 클래스 제거 
mytag.classList.toggle(name);   // 클래스 on/off
mytag.classList.contains(name); // 해당 클래스가 존재하는지 여부를 boolean으로 반환

• 자바스크립트객체로 HTML요소를 가져오면 className이라는 프로퍼티(속성)이 생긴다.
• 이 값에 적용하고자 하는 CSS 클래스 이름을 대입한다.
• 두개 이상의 클래스를 복수 정용할 경우 구분한 문자열 형식으로 할당
• className: 특정요소의 클래스 이름을 가져오거나 설정할수있다.
  설정 시 추가가 아닌 기존 클래스이름을 아애 바꿔버린다는 뜻,
  이에 보완점으로 classList를 사용한다.
• classList: 읽기전용 프로퍼티이므로 공백으로 구분된 el.className을 통해
  클래스 목록에 접근하는 방식을 대체하는 간편한 방식
  => 클래스 속성값 전체를 바꿀 때는 className , 개별 조작 시에는 classList

예제

<script>
 document.querySelector("#btn9").addEventListener("click", (e) => {
            const box = document.getElementById('box');
            // box3추가되며 , 이미 있는 클래스가 있다면 무시한다 에러발생안함.
            box.classList.add('box1', 'box3');
            //  box2제거, 존재하지 않는 클래스를 제거하는 것은 에러 발생안함.
            box.classList.remove('box2');
        });

        document.querySelector("#btn10").addEventListener("click", (e) => {
            const box = document.getElementById('box');
            box.classList.add('box2');
            box.classList.remove('box1');
        });


    </script>