속성과 css속성변경
- 노드의 일반 속성을 바꿀때는 노드.속성명을 이용
- 노드의 css속성을 바꿀 때는 style속성을 이용
- css의 속성명은 카멜표기법을 따른다
- 노드의 style에 전달되는 값은 문자열로 작성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<head></head>
<body>
<h2>css 스타일 변경하기</h2>
<form id="form">
<img src="1.jpg" width="200" class="img" style="border: 3px solid black;"><br>
<select class="select">
<option value="1.jpg">winter</option>
<option value="2.jpg">spring</option>
<option value="3.jpg">summer</option>
<option value="4.jpg">fall</option>
</select>
<span>변경할 색상 : </span>
<input type="color" class="input">
</form>
<script>
var form = document.getElementById("form"); // form 전체를 가져오기
var img = form.querySelector(".img"); // 부모태그를 가져온후 .을 이용하여 가져오기
var select = form.querySelector(".select"); // querySelector의 css선택자 이용
var input = form.querySelector(".input");
select.onchange = function(){ // onchage 이벤트 값이 변경되는 것을 감지
img.src = select.value
}
input.onchange = function(){
//img.style.border = "3px solid " + input.value;
img.style.borderColor = input.value; //카멜표기법
console.log(input.value )
}
</script>
</body>
</html>