JavaScript Style Control

스타일 변경 기초

HTML

    <div class="test">

      <p class="text">테스트용 텍스트</p>

    </div>

 

JavaScript

const text = document.querySelector(".text");

text.style.color = "red";

 

ON BROWSER(변경 전)

ON BROWSER(변경 후)

 

 

 

 

 

복수 개체의 스타일 일괄 변경

HTML

    <div class="test">

      <p class="text">테스트용 텍스트</p>

      <p class="text">테스트용 텍스트</p>

      <p class="text">테스트용 텍스트</p>

      <p class="text">테스트용 텍스트</p>

    </div>

 

JavaScript

const text = document.querySelectorAll(".text");

for (let i = 0; i < text.length; i++) {

  text[i].style.color = "red";

}

 

ON BROWSER(변경 전)

 

ON BROWSER(변경 후)

 

 

 

 

 

CSS가 사전설정되어 있는 텍스트를 변경

HTML

    <div class="test">

      <p class="text01">테스트용 텍스트(css 사전설정 단일)</p>

      <p class="text02">테스트용 텍스트(css 사전설정 복수)</p>

    </div>

 

SCSS

.text01 {

  font-size: 25px;

}

.text02 {

  font-size: 25px;

  font-weight: 700;

  color: red;

}

 

JavaScript

const text01 = document.querySelector(".text01");

const text02 = document.querySelector(".text02");

text01.style.fontSize = "40px";

text01.style.fontWeight = "700";

text02.style.color = "blue";

text02.style.backgroundColor = "grey";

 

ON BROWSER(변경 전)

ON BROWSER(변경 후)

 

 

 

 

 

복수 개체의 스타일, 내용 일괄 변경

HTML

    <div class="test">

      <p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>

      <p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>

      <p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>

      <p class="text">한꺼번에 스타일변경과 동시에 텍스트 내용 변경</p>

      <button class="btn">변경하기!</button>

    </div>

 

SCSS

.text {

  line-height: 3;

  color: red;

}

 

JavaScript

const text = document.querySelectorAll(".text");

const btn = document.querySelector(".btn");

btn.addEventListener("click", function () {

  for (let i = 0; i < text.length; i++) {

    text[i].style.color = "gold";

    text[i].style.fontSize = "20px";

    text[i].textContent = `${i + 1}번째 텍스트 변경 완료`;

  }

  btn.style.pointerEvents = "none";

});

 

ON BROWSER(변경 전)

 

ONBROWSER(변경 후)