[js] Vanilla JS 로 css 값 변경 By starseat 2022-06-28 14:15:18 javascript Post Tags 화면 작업중 js 로 css 값을 동적으로 변경해야 될 일이 생겼다. 매일 jQuery 로 쓰다가 Vanilla JS 를 익숙하게 쓰기 위해서 사용했다가 글로 남기면 나중에도 쓸 수 있을까 하여 작성한다. * 먼저 해당 엘리먼트를 가져온다. (id를 `btn-test` 로 가지는 항목으로 예를 들겠다.) ```javascript const btn = document.querySelector('#btn-test'); ``` * 저장된 값을 가져온다. (`margin-left` 로 예를 든다.) ```javascript // 그냥 가져오면 '10px' 이런 형식으로 단위가 붙지만, // parseInt() 로 감싸면 'px' 같은 단위가 사라진다. // (parseInt() 에서 10을 준건.. 습관적으로 쓴건데.. 10진수로 가져오겠단 뜻이다.) const btnMarginLeft = parseInt(window.getComputedStyle(btn).getPropertyValue('margin-left'), 10); ``` * 값을 변경한다. (`10px` 추가) ```javascript // ((btnMarginLeft + 10) + 'px') 에서 (btnMarginLeft + 10) 이거를 () 로 감싼건 뒤의 'px'가 문자열 이므로 숫자가 더해지는 것을 먼저 진행하려 한 것이다. // 3번째 파라미터인 'important' 는 옵션 사항이다. btn.style.setProperty('margin-left', (btnMarginLeft + 10) + 'px', 'important'); ``` Previous Post javascript 에서 file 읽기 Next Post [js] 성능 측정
