JS/Javascript
[javascript] CSS 스타일 확인 및 수정 (el.style, getCoumputedStyle, SetAttribute, ..)
ui-o
2025. 7. 10. 15:00
반응형
CSS 스타일 확인 및 수정
- 특정요소의 css 스타일 정보에 접근하고 수정하려면 style을 사용
스타일 확인
요소.style
- 요소에 직접 설정된 인라인 스타일만 확인 가능
// [문법]
요소.style.스타일 속성<div class="box" style="color:red"></div>
const el = document.querySelector('div');
console.log(el.style.color); // 인라인 스타일로 지정된 color만 나옴window.getComputedStyle(요소)
- 해당 요소에 최종적으로 적용된 모든 CSS 스타일을 가져옴
- 외부 CSS, 클래스, 상속 등까지 포함해서 확인 가능.
- 읽기 전용
- window는 브라우저 전역 객체로 생략가능하여 getComputedStyle(el)로 사용 가능
✓ "브라우저가 계산한 결과를 가져오는 느낌 → "브라우저야, 지금 이 div는 어떤 스타일 입었어?"
// [문법]
const computedStyle = window.getComputedStyle(element [, pseudoElement]);
// 검색방법
getComputedStyle(요소).스타일 속성
getComputedStyle(document.getElementById('text').fontSize
| 매개변수 | 설명 |
| element | 스타일을 확인할 DOM 요소 (필수) |
| pseudoElement | ::before, ::after 같은 의사 요소를 확인할 때 사용 (선택) |
반환값
- CSSStyleDeclaration 객체 (읽기 전용)
- 속성 이름은 모두 CSS 표기법 (케밥 표기법 → 카멜 표기법)으로 접근
<style>
.box {
color: red
}
</style>
<div class="box">test</div>
<script>
const el = document.querySelector('.box');
const style = getComputedStyle(el);
console.log(style.color, style.fontSize); // ⇒ rgb(255, 0, 0) 16px
</script>
가상요소 스타일 확인
const style = window.getComputedStyle(box, '::before');
console.log(style.content); // 가상 요소의 content 속성 확인스타일 수정
요소.style.속성이름
- 요소에 인라인 스타일을 설정
- 카멜 표기법으로 사용
// [문법]
요소.style.변경할스타일속성 = "속성값";el.style.color = 'blue';
el.style.backgroundColor = 'yellow';요소.setAttribute('style', '...')
- 여러 스타일을 한 번에 문자열로 설정 가능 (기존 스타일 덮어씀에 주의)
- 인라인으로 적용한 CSS스타일을 완전히 덮어쓰기 때문에, 기존에 적용한 인라인 스타일 속성은 전부 사라짐
- 다만, embedded 방식, 외부 스타일 시트로 적용된 스타일은 새롭게 속성을 정의하지 않은 경우 그대로 속성이 유지됨
// [문법]
요소.setAttribute('style', '스타일 속성; 스타일 속성....');<style>
.box {
color: red
}
</style>
<body>
<div class="box" style="color:red">test</div>
</body>
<script>
const el = document.querySelector('.box');
el.setAttribute('style', 'background-color:blue;');
<!-- ⇒ 기존 인라인 스타일을 완전히 덮어버리기 때문에
inline으로 설정한 color:red값은 사라지고
<div class="box" style="background-color:blue">test</div> 변경한 스타일만 남음
다만, 외부 CSS에서 설정한 값에는 영향을 미치지 않기 때문에 embedded로 적용한 color:red가 적용
-->
</script>요소.classList.add/remove/toggle/replace ..
- 스타일이 정의된 클래스를 추가/제거/토글 가능
- CSS에서 미리 정의한 클래스를 JS로 on/off하는 구조에 적합
[javascript] 클래스를 활용한 요소 제어 classList(add, remove, contains, toggle, replace, item)
클래스명을 활용한 요소 제어HTML 요소의 클래스(class)를 확인하거나, 추가하거나, 제거하거나, 토글 하는 등의 작업은 주로 Element.classList를 통해 수행classListDOM 요소의 class 속성을 조작할 수 있도
u-pub.tistory.com
속성 접근방법
- 자바스크립트 명명규칙에 의해 CSS속성명을 카멜케이스로 사용
- 대괄호 접근자로 CSS 속성명을 그대로 유지하며 사용도 가능
// 마침표 접근자를 사용할 경우, 카멜 케이스 사용
el.style.fontSize = '20px';
// 대괄호 접근자를 사용할 경우 CSS 속성명 그대로 사용 가능
el.style['background-color'] = 'blue';반응형