Javascript 엘리먼트 노드의 속성 변경

HTML코드

<section id ="section5">
    <h1>Ex5 : 엘리먼트 노드의 속성 변경</h1>
    <div class="box">
        <input class="src-input" type="text" list="img-list">
        <datalist id="img-list">
            <option value="img1.jpg">img1.jpg</option>
            <option value="img2.jpg">img2.jpg</option>
            <option value="img3.jpg">img3.jpg</option>
        </datalist>
        <select class="src-select">
            <option value="img1.jpg">img1.jpg</option>
            <option value="img2.jpg">img2.jpg</option>
            <option value="img3.jpg">img3.jpg</option>
        </select>
        <input type="color" class="color-input">
        <input class="change-button" type="button" value="변경하기"/>
    </div>
    <div>
        <img class="img" src="images/img1.jpg" style="border: 1px solid red;"width="200px" height="200px"/>
    </div>
</section>

input list = "img-list"	datalist와 연결 태그
datalist id = "img-list"	검색 창에 나올 리스트 태그
select class= "src-select"	리스트 선택 태그
input type=color	색상 선택 input태그

4번째 줄 input 태그에서 list="img-list"를 불러오는데 input창의 검색내용 미리보기를 사용하는 것이다.

<datalist>를 사용해서 넣어 줄 수 있고 사용하고자하는 데이터를 불러오고자하는 input 태그에 id값을 넣어준다.

 

JS코드

//Ex5 : 엘리먼트 노드의 속성 변경
window.addEventListener("load", function() {
    var section = document.querySelector("#section5");
    var srcInput = section.querySelector(".src-input");
    var srcSelect = section.querySelector(".src-select");
    var changeButton = section.querySelector(".change-button");
    var img = section.querySelector(".img");
    var colorInput = section.querySelector(".color-input");
 
    changeButton.onclick = function () {
       // img.src = "images/"+srcSelect.value;
        img.src = "images/"+srcInput.value;
      
      // img.style["border-color"] = colorInput.value;
       img.style.borderColor = colorInput.value;
       console.log(img.className);
    }
});
 

 

js 코드에서 html태그를 읽어오면 변수가 아닌 객체로 읽어들이기 때문에 읽어온 객체의 속성을 사용 할 수 있다.

img.src, img.style 등 html을 속성을 수정 할 수 있는 속성들을 사용 할 수 있다.

실행결과

input에 사진명에 따라 사진이 변경되고 컬러설정에 따라 테두리가 변경된다.