input 태그의 range속성으로 배경색상을 바꿔보자.
<form name="form1">
<fieldset>
<label>R</label>
<input type="range" name="r" min="0" max="255" value="255"><br>
<label>G</label>
<input type="range" name="g" min="0" max="255" value="255"><br>
<label>B</label>
<input type="range" name="b" min="0" max="255" value="255">
</fieldset>
</form>
- min : 최소값
- max : 최대값
- value는 range 스크롤바가 기본으로 255에 있도록 설정
<script>
var r = document.form1.r;
var g = document.form1.g;
var b = document.form1.b;
r.onchange = function() {
document.body.style.backgroundColor = "rgb(" + r.value + "," + g.value + "," + b.value + ")";
}
g.onchange = function() {
document.body.style.backgroundColor = "rgb(" + r.value + "," + g.value + "," + b.value + ")";
}
b.onchange = function() {
document.body.style.backgroundColor = "rgb(" + r.value + "," + g.value + "," + b.value + ")";
}
</script>
배경색 설정을 document.body.bgColor로 적용하려 했는데 엉뚱한 색이 나왔다.. <body bgColor="red">이렇게는 되는데 <body bgColor="rgb(255, 0, 0)"> 이렇게는 엉뚱한 색이 나오더라규..?!
💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈