資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在JavaScript中使用顏色拾取器選擇背景顏色？
在使用HTML和CSS建立網頁時，我們需要從顏色拾取器中選擇顏色。有時，我們也可能需要透過顏色拾取器輸入選擇背景顏色。
在本教程中，我們將學習不同的方法，允許使用者從顏色拾取器輸入中選擇背景顏色，當用戶選擇新顏色時，它應該更改背景顏色。
使用顏色拾取器更改背景顏色
在HTML中，顏色拾取器輸入允許使用者從中選擇顏色。我們可以使用輸入的value屬性獲取選定的顏色值。
語法
使用者可以按照以下語法根據顏色拾取器上選擇的值更改背景顏色。
Document.body.style.backgroundColor = color.value;
我們在上面的語法中訪問文件和body樣式物件，並更改其“backgroundColor”屬性。
示例
在下面的示例中，我們建立了輸入並將其型別新增為顏色。因此，輸入將充當顏色拾取器。使用者可以從顏色拾取器中選擇任何顏色，然後單擊“更改顏色”按鈕以呼叫selectColor()函式。
selectColor()函式根據從顏色拾取器中選擇的最新值更改文件正文的背景顏色。
<html>
<head>
<style>
button {
font-size: 1.2rem;
border-radius: 10px;
margin: 20px;
border: 2px solid blue;
color: red;
}
</style>
</head>
<body>
<h2>Use the <i>color picker</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<button onclick = "selectColor()"> Change the color </button>
<script>
function selectColor() {
let color = document.getElementById('colorInput');
// changing the background color
document.body.style.backgroundColor = color.value;
}
</script>
</body>
</html>
使用input事件
JavaScript包含許多事件。我們將使用input事件來檢測顏色拾取器中的最新事件。我們將透過id在JavaScript中訪問顏色輸入並呼叫addEventListener()方法。
我們將“input”作為addEventListener()方法的第一個引數，並將回撥函式作為第二個引數傳遞，以根據使用者從顏色拾取器中選擇顏色來更改正文的背景顏色。
語法
使用者可以按照以下語法使用input事件透過顏色拾取器更改背景顏色。
colorInput.addEventListener('input', () => {
document.body.style.backgroundColor = color.value;
})
示例
在這個例子中，我們建立了顏色拾取器輸入，其id為“colorInput”。我們在JavaScript中透過其id訪問了輸入元素。之後，我們使用了addEventListner()方法和style物件的backgroundColor屬性，透過顏色輸入來更改正文的背景顏色。
<html>
<body>
<h2>Using the <i>input event</i> to change a background color via color picker</h2>
<input id = "colorInput" type = "color">
<script>
let colorInput = document.getElementById('colorInput');
// Whenever the user changes the color, the input event will be called.
colorInput.addEventListener('input', () =>{
document.body.style.backgroundColor = colorInput.value;
});
</script>
</body>
</html>
使用setInterval()函式
setInterval()函式允許我們在特定間隔後呼叫特定函式。它將回調函式作為第一個引數，並將時間間隔（以毫秒為單位）作為第二個引數。
setInteral()函式會在一段時間後呼叫回撥函式。在這裡，我們將根據顏色拾取器中的顏色值更改背景顏色的值。
語法
使用者可以按照以下語法使用setInterval()函式從顏色拾取器中選擇背景顏色。
setInterval(() => {
document.body.style.backgroundColor = colorValue;
}, 100);
在上述語法中，colorValue是從顏色拾取器中獲取的顏色值。
示例
在下面的示例中，作為setInterval()函式引數傳遞的箭頭函式將每100毫秒呼叫一次。在箭頭函式中，我們透過id訪問顏色輸入，使用value屬性獲取其顏色值，並將其賦值給style物件的“backgroundColor”屬性。
使用者可以在輸出中看到，當他們在顏色拾取器中更改顏色時，它將立即反映為文件正文的背景顏色。
<html>
<head>
<style>
body {
color: white;
}
</style>
</head>
<body>
<h2>Using the <i>setInterval()</i> function to change a background color via color picker.</h2>
<input id = "color" type = "color" value = "fff">
<script>
// Change color after every 100 seconds
setInterval(() => {
let color = document.getElementById('color');
let colorValue = color.value;
document.body.style.backgroundColor = colorValue;
}, 100);
</script>
</body>
</html>
在本教程中，我們學習了三種方法來從顏色拾取器中選擇顏色，並根據其值更改正文的背景顏色。使用者可以使用第二種方法，它可以立即更改背景顏色，而無需按下按鈕。
但是，使用setInterval()函式的第三種方法也會立即更改背景顏色，因為我們是從顏色拾取器中選擇的。儘管如此，即使我們沒有更改顏色拾取器中的值，它也會每100毫秒呼叫一次。因此，它可能會降低應用程式的效能。
4K+ 次瀏覽
