자바스크립트로 스타일 변경하기

자바스크립트로 style 변경하기

 인풋창에서 색상을 선택한 후에 버튼을 클릭하면 보더의 색상이 바뀐다.

보더 색상
바꾸기

 

---

input 값에 따라 박스의 보더 색상을 바꾸기

        btn.onclick = function(){
          잘못된 방법
            // box.style.border-color = colorInput.value;
              이 방법은 사용할 수 없다. 
          
          가능한 방법 1. - 속성자 선택자 활용방법
             box.style["border-color"] = colorInput.value; 
         
          가능한 방법 2. - 자바스크립트 명명자(카멜법) 활용방법
            box.style.borderColor = colorInput.value;
        }

 

완성코드 확인하기

자바스크립트로 계산기 만들기

자바스크립트 테이블 복제 노드

자바스크립트 이벤트 좌표 - 클릭한 곳의 좌표 보기

<section style="margin-left: 3rem;">
  <input class="color-input" style="width: 70px; 
   border-radius: 10%; padding: 0.3rem;" type="color" /> 
  <input class="btn" style="margin-left: 1rem;" type="button" value="버튼" />
  <div id="box" style="width: 100px; height: 100px; 
    background-color: blue; border: 10px solid red;
    margin-top: 1rem; padding: 1rem; text-align: center;">
    <p class="txt" data-ke-size="size16">보더 색상 <br />바꾸기</p>
  </div>
</section>

<script>
        let box = document.querySelector("#box");
        let btn = document.querySelector(".btn");
        let colorInput = document.querySelector(".color-input");

         btn.onclick = function(){
            // box.style["border-color"] = colorInput.value; 
           box.style.borderColor = colorInput.value;
         }
 </script>

 

자바스크립트로 이미지 변경하기