자바스크립트로 css를 적용하는 방법은 두 가지가 있습니다.
클래스에 css를 미리 담아두고 클래스를 넣어주던지, style속성으로 스타일을 적용하는 방법입니다.
하지만 style은 css의 우선순위가 깨지기 때문에 클래스로 다룰 수 없을 때만 사용해야합니다.
클래스
elem.className
클래스의 이름을 보여줍니다. 값을 대입하면 클래스 전체가 바뀝니다.
elem.classList
클래스를 개별적으로 조작할 수 있습니다. 이터러블 객체입니다.
elem.classList.add/remove("class") - class를 추가하거나 제거
elem.classList.toggle("class") - 클래스가 존재하면 클래스를 제거하고 그렇지 않으면 추가
elem.classList.contains("class") - 클래스 존재 여부에 따라 true/false를 반환
<body class="main page">
<script>
// 클래스 추가
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>스타일 속성
elem.style은 속성 style에 대응되는 객체입니다.
css의 속성들과 같지만 margin-bottom 처럼 하이픈으로 연결된 속성명은 자바스크립트에서 카멜케이스로 적습니다.
또한, 스타일들의 단위를 꼭꼭 넣어야 잘 동작합니다! 단위가 없을 때 기본적으로 px을 붙여주는 jQuery와 달라요.
ex)
margin-bottom -> marginBottom
-moz-border-radius -> MozBorderRadius
스타일 프로퍼티를 아예 없애고 싶을 때
빈문자열을 주면 원래 style에 해당 프로퍼티가 없었던 것처럼 사라집니다.
document.body.style.display = "none;
setTimeout(()=>{
document.body.style.display = "";
}, 1000);style.cssText
문자열로 전체 스타일을 설정할 수 있습니다. 전체 스타일이므로 기존 스타일에 추가가 아니라 교체입니다! 새로 만든 것에 처음 스타일을 입힐 때는 괜찮겠네요.
<div id="div">버튼</div>
<script>
// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있습니다.
div.style.cssText=`color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
alert(div.style.cssText);
</script>getComputedStyle 계산된 스타일 얻기
이미 적용된 스타일 값을 알고 싶을 때 유용합니다.
계산값은 우리가 적용한 형태인 height: 1em같은 형태이고 결정값은 상대값도 전부 계산해 고정단위를 사용하는 절대값으로 값을 변환한 것을 말합니다. 원래는 계산값이 적용되었으나 표준이 개정되어 결정값을 얻을 수 있습니다.
프로퍼티의 정확한 풀네임을 적는 접근법을 추천합니다. paddingLeft만 값이 지정되어 있는 요소에 padding을 물어보면 브라우저마다 다른 대답을 하기 때문입니다.
getComputedStyle(element, [pseudo])
element
값을 읽을 요소
pseudo
::before같이 의사 요소(pseudo-element)가 필요한 경우 명시해줌. 빈 문자열을 넘겨주거나 아무런 값을 입력하지 않은 경우 요소 자체를 의미함
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// 이제 마진과 색 정보를 얻을 수 있습니다.
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>