1. 인라인 스타일
app.style.background = '#000';
app.style.setProperty('background', '#f00');
cssText는 기존에 설정된 inline이 날아감
app.style.cssText = `
background: #fff;
max-width: 500px;
width: 100%;
margin: 100px auto;
padding: 20px;
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
`;
app.style.removeProperty('box-shadow');
2. 스타일 시트
document.styleSheets[0].insertRule(`
#app {
background: #fff;
max-width: 500px;
width: 100%;
margin: 100px auto;
padding: 20px;
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}
`);
document.styleSheets[0].deleteRule(0);
app.style.background = '#000';
console.log(app.style.background);
console.log(getComputedStyle(app));
3. 스타일 시트 동적 생성
const styleSheet = new CSSStyleSheet();
styleSheet.replace(`* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background: linear-gradient(180deg,
#3ac6f3 0%,
rgba(200, 180, 180, 0.4) 40%,
rgba(255, 0, 0, 0.56) 100%);
overflow: hidden;
}
#app {
background: #fff;
max-width: 500px;
width: 100%;
margin: 100px auto;
padding: 20px;
border-radius: 6px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}
#header {
display: flex;
justify-content: space-between;
align-items: center;
}
#counter span {
margin-right: 0.5rem;
}
#input-field {
margin: 20px 0;
width: 100%;
display: flex;
height: 2.5rem;
}
#input-field input {
width: 85%;
height: 100%;
border-radius: 3px;
border: 1px solid #ccc;
font-size: 0.8rem;
padding-left: 15px;
outline: none;
}
#input-field input:focus {
border-color: #ff0051;
}
#input-field button {
width: 50px;
height: 100%;
border: none;
color: #fff;
margin-left: 5px;
font-size: 21px;
outline: none;
background: #3ac6f3;
border-radius: 3px;
}
#item-list-container {
max-height: 250px;
overflow: scroll;
scrollbar-width: none;
}
#item-list-container li {
position: relative;
display: flex;
justify-content: space-between;
list-style: none;
height: 3rem;
line-height: 3rem;
margin-bottom: 0.5rem;
overflow: hidden;
border-radius: 5px;
}
#item-list-container div {
width: 100%;
display: flex;
justify-content: space-between;
}
#item-list-container input {
margin: 1rem;
transition-duration: 0.5s;
opacity: 1;
}
#item-list-container button {
width: 3rem;
margin: 0.3rem 1rem;
width: 3rem;
border: none;
color: #fff;
margin-left: 5px;
font-size: 0.8rem;
font-weight: bold;
outline: none;
background: #f97;
transition-duration: 0.5s;
opacity: 1;
}
#item-list-container button:hover {
background-color: #ddd;
}
#item-list-container span {
width: 100%;
text-align: left;
}`);
document.adoptedStyleSheets = [styleSheet];
'개발공부 > Javascript' 카테고리의 다른 글
[JS] 이벤트 버블링과 캡처링 (0) | 2024.04.04 |
---|---|
[JS] 호이스팅 (0) | 2024.03.28 |
[JS] 기본형 데이터와 참조형 데이터 (0) | 2024.03.24 |
[JS] 실행 컨텍스트 (1) | 2024.03.13 |
[JS] 클로저 (0) | 2024.03.11 |