CSS 스타일 속성 변경

jongtaekp 2019. 12. 11. 20:27

2019. 12. 11. 20:27

<body>

function changeImage()

{

var txt1 = document.getElementById("txt1");

var img1 = document.getElementById("img1");

img1.src = txt1.value;

txt1.style.border = "10px solid #0000ff";　　-> 문자열

}

</script>

<form>

</body>

// EX 5 : 엘리먼트 노드의 속성 CSS 속성 변경

window.addEventListener("load", function(){

var section5 = document.querySelector("#section5");

var srcInput = section5.querySelector(".src-input");

var imgSelect = section5.querySelector(".img-select");

var changeButton = section5.querySelector(".change-button");

var img = section5.querySelector(".img");

var colorInput = section5.querySelector(".color-input");

changeButton.onclick = function(){

img.src = "images/"+srcInput.value;

//img.src = "images/"+imgSelect.value;

//img.style.border-color = ?; -> 이런 식으로 사용할 수 없다.

//img.style["border-color"] = colorInput.value; 이런 식으로 사용할 수 있다.

img.style.borderColor = colorInput.value;

console.log(img.className);

};

출처 : 자바스크립트 DOM 프로그래밍 31강 - CSS 스타일 속성 변경

택이의DevStroy