JavaScript實現通過滑塊改變網頁顏色
阿新 • • 發佈：2021-08-31
大家好，今天我在看web前端的HTML時，看到YJdYaIAinput標籤的type屬性是range時在頁面上顯示的是一個滑塊，我突發奇想能不能通過滑來改變的顏色。現在我和大家分享一下通過滑塊來改變網頁的顏色。
首先要知道怎麼樣來表示顏色，顏色的表示有四種方式：
1、用顏色的名稱來表示顏色：red,green...等
2、用#加16進位制數表示：#FF0000/#F00 紅色、#00FF00/#0F0 綠色 ...等
3、用rgb值：rgb(0,0) 黑色、rgb(255,255,255) 白色....等
4、用rgba值表示：rgba(0,0.5) 半透明黑色、rgba(255,.5) 半透明紅色（a值表示http://www.cppcns.com 透明度）
我用的是rgb值表示顏色的，r值，g值，b值的取值範圍都是0~255。
body中滑塊的設定：max是最大取值，min是最小取值，step是步進值，這裡還有一個value屬性預設是取中間值
<body id="box"> <label for="r">r值</label> <input type="range" max="255" min="0" step="1" id="r"> <label for="g">g值</label> <input type="range" max="255" min="0" step="1" id="g"> <label for="b">b值</label> <inpuYJdYaIAt type="range" max="255" min="0" step="1" id="b"> </body>
：為每個滑塊設定change事件，當滑塊的值改變時就執行。
<script>
//通過id獲取元素的函式
function $(id) {
return document.getElementBYJdYaIAyId(id);
}
//獲取每個滑塊的值
let r = $('r').value
let g = $('g').value
let b = $('b').value
//通過id獲取元素
let box = $('box')
//設定網頁背景顏色
box.style.background = 'rgb(' + r + ',' + g + ',' + b + ')';
//為r值的滑塊設定事件
$('r').addEventListener("change",function () {
r = this.value;
box.style.background = 'rgb(' + r + ',' + b + ')';
})
//為g值的滑塊設定事件
$('g').addEventListener("change",function () {
g = this.value;
box.style.background = 'rgb(' + r + ',' + b + ')';
})
//為b值的滑塊設定事件
$('b').addEventListener("change",function () {
b = this.value
box.style.background = 'rgb(' + r + ',' + b + ')';
})
</script>
當然inpYJdYaIAut中也有改變顏色的方法
<input type="color" onchange="document.body.style.backgroundColor=this.value">
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。