CSS 스타일 속성변경

사진의 테두리 색상을 바꾸는 예제를 수행해보겠다.

 

html

 <div>
        <input type="color" class="color-input">
        <img class="img" src="image/img1.jpg" style="border:2px solid red;">
        <input type="button" class="btn2" value="변경">
      </div>

 

js

window.addEventListener("load", function(){
   var imgt1 = document.querySelector("#imgt1");
   var img = imgt1.querySelector(".img");
   var btn2 = imgt1.querySelector(".btn2");
   var colorinput = imgt1.querySelector(".color-input");
   btn2.onclick = function(){
      console.log(colorinput.value);
     // img.style["border-color"] = colorinput.value;
      img.style.borderColor = colorinput.value;
   }
 });

 

img의 색상을 바꾸는 방법으로

img.style[] 에 색상값을 대입하는 방법과 img.style.borderColor 에 색상값을 대입하는 방법 총 2가지가 있습니다.