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을 써야함.
}
});