develog

[css] console 에서 css 값 변경하기 본문

카테고리 없음

[css] console 에서 css 값 변경하기

냐옴 2024. 10. 2. 17:48

 

<button class="next-button">다음2</button>

 

 

.next-button {
    position: fixed;
    left: 0;
    /* bottom: 0; */
    top: 100px;
    width: 100vw;
    height: 52px;
    color: white;
    background-color: var(--primary);
    transform: translate(0px, 0px);
    /* pointer-events: none; */
    /* opacity: 0; */
    z-index: 999;
}

 

 

// element 가져오기
document.querySelector('.next-button')

// css 정보 가져오기, CSSStyleDeclaration
window.getComputedStyle(document.querySelector('.next-button'))

// css 값 확인
window.getComputedStyle(document.querySelector('.next-button')).position
window.getComputedStyle(document.querySelector('.next-button')).top

// css 값 변경
document.querySelector('.next-button').style.top = '200px';

// 변경된 값 확인하기
window.getComputedStyle(document.querySelector('.next-button')).top
저작자표시 비영리 동일조건
Comments