코드 스피츠 스터디 진행
cssom
- css를 객체화 시켜서 모델링 한 것
- 자바스크립트로 css그 자체를 수정할 수 있다(동적으로 조작 가능)
- css를 조작하려면 태그에서 cssstylesheet 객체를 꺼내서 조작해야 함
- stylesheet객체가 실체이고 'style' 이라는 돔에 집어넣은 것
- Styled Dom Element > sheet > cssRules > item > selectorText = style = type > properties
스터디 진행 시 알게된 점
- 돔으로 직접 접근하는 방법은 인라인(우선 순위1)으로 들어가기 때문에 남용 시에 대참사가 날 수 있음.
sheet.insertRule('div {background-color: red}', rules.length);
const $container = document.querySelector('#container');
$container.style.backgroundColor = 'pink'; // 1순위로 적용됨
sheet.insertRule('div {background-color: green}', rules.length);- link던 스타일태그던 가장 나중 순서가 적용된다
- link로 불러와진 sheet는 document.styleSheets으로 접근할 수 있다**
<head>
...
<link rel="stylesheet" href="./style.css" />
<title>Style Sheets</title>
<head/>
#프론트엔드