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)"> 이렇게는 엉뚱한 색이 나오더라규..?!

💗 개발 공부하는 블로그입니다. 틀리거나 문제될게 있다면 코멘트 부탁드립니다. 👉👈