[JavaScript] backgroud 설정

유얌얌·2023년 10월 26일
0

JavaScript

목록 보기
3/30

backgroundColor

JS code

	document.body.style.backgroundColor = ''

예시

    // click 구현
    // 1. 선택
    const switcherTag = document.querySelector('.switcher')
    const gray = document.querySelector('#grayButton')
    const white = document.querySelector('#whiteButton')
    const navy = document.querySelector('#navyButton')

    // 2. 콜백함수
    const switchColor = function (event) {
      if (event.target === gray) {
        document.body.style.backgroundColor = 'gray'
        document.body.style.color = 'white'
      } else if (event.target === white) {
        document.body.style.backgroundColor = 'white'
        document.body.style.color = 'black'
      } else if (event.target === navy) {
        document.body.style.backgroundColor = 'navy'
        document.body.style.color = 'white'
      }
    }


    // 3. 핸들러 붙이기
    switcherTag.addEventListener('click', switchColor)

backgroundImage

JS code

    document.body.style.backgroundImage = url(images.jpg)  // mdn

lodash를 활용하여 backgroundImage가 랜덤으로 나오게

    const pictures = _.range(1, 7)
    const number = _.sample(pictures)
    document.body.style.backgroundImage = `url(images/${number}.jpg)`  // mdn에서 backgroundimage 넣는거 참고, url안에 넣어야해
profile
조금씩이라도 꾸준하게

0개의 댓글

관련 채용 정보