CSS 스타일 속성변경

HTML

<section id="section5">
	<h1>Ex5 : 엘리먼트 노드의 속성 & CSS 속성 변경하기  </h1>
    	<div>
    	<input class = "src-input" list="img-list">
        <datalist id = "img-list">
        	<option value="img1.jpg">img1</option>
        	<option value="img2.jpg">img2</option>
        	<option value="img3.jpg">img3</option>
        </datalist>
        <input type="color" class="color-input">//color선택 input
        <input class = "change-button" type="button" value="변경">
        </div>
        <div>
        <img class = "img" src="images/img1.jpg" style="border: 5px solid red;"> 
        //5px의 red border생성
        </div>
    </section>

JavaScript

//Ex5 : CSS 속성 변경
window.addEventListener("load",function(){
    var section = document.querySelector("#section5");
    var srcInput = section.querySelector(".src-input");
    var changeButton = section.querySelector(".change-button");
    var img = section.querySelector(".img");
    var colorInput = section.querySelector(".color-input")
    
    changeButton.onclick = function(){
        img.src = "images/" + srcInput.value;
        //img.style["border-color"] = colorInput.value; 아래와 같은 코드
        img.style.borderColor = colorInput.value; 
        console.log(img.className);//JavaScript내에서는 .class대신 className을 써야함.
    }
});