如何使用顏色選擇器更新 div 或任何元素的背景顏色
[英]How can I update the background color of my div or any element by using Color Picker
問題描述
我使用 ([mdbassit/Coloris][1]) 作為我網站的顏色選擇器。 我正在嘗試使用 JavaScript 使用該顏色選擇器來更改任何 div 或元素的顏色，但它不起作用。
我覺得問題出在我的 JavaScript 代碼上。
我的代碼：
Coloris({ // The default behavior is to append the color picker's dialog to the end of the document's // body. but it is possible to append it to a custom parent instead. This is especially useful // if the color fields are in a scrollable container and you want color picker' dialog to stay // anchored to them. You will need to set the position of the container to relative or absolute. // Note: This should be a scrollable container with enough space to display the picker. parent: '.container', // A custom selector to bind the color picker to. This must point to input fields. el: '.color-field', // The bound input fields are wrapped in a div that adds a thumbnail showing the current color // and a button to open the color picker (for accessibility only). If you wish to keep your // fields unaltered, set this to false, in which case you will lose the color thumbnail and // the accessible button (not recommended). wrap: true, // Available themes: default, large, polaroid. // More themes might be added in the future. theme: 'default', // Set the theme to light or dark mode: // * light: light mode (default). // * dark: dark mode. // * auto: automatically enables dark mode when the user prefers a dark color scheme. themeMode: 'light', // The margin in pixels between the input fields and the color picker's dialog. margin: 2, // Set the preferred color string format: // * hex: outputs #RRGGBB or #RRGGBBAA (default). // * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A). // * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A). // * auto: guesses the format from the active input field. Defaults to hex if it fails. // * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A). format: 'hex', // Set to true to enable format toggle buttons in the color picker dialog. // This will also force the format (above) to auto. formatToggle: true, // Enable or disable alpha support. // When disabled, it will strip the alpha value from the existing color value in all formats. alpha: true, // Show an optional clear button and set its label clearButton: { show: true, label: 'Done' }, // An array of the desired color swatches to display. If omitted or the array is empty, // the color swatches will be disabled. swatches: [ '#264653', '#2a9d8f', '#e9c46a', 'rgb(244,162,97)', '#e76f51', '#d62828', 'navy', '#07b', '#0096c7', '#00b4d880', 'rgba(0,119,182,0.8)' ] }); var inputBox = document.getElementById('colorBackground'); inputBox.onkeyup = function(){ document.body.style.backgroundColor = inputBox.value; }
body{ background-color: black; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/> <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script> <body> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <input class="color-field" type='text' id='colorBackground'> </body>
請告訴我正確的 JavaScript 代碼，通過它我可以更改任何元素或 div 的背景顏色或任何顏色屬性。
1 個解決方案
解決方案1
1 已采納 2021-11-20 07:18:06
如果我正確理解了您的問題，要解決此問題，您需要使用addEventListener方法並直接從目標獲取值。
const inputBox = document.getElementById('colorBackground');
inputBox.addEventListener('change', ev => {
document.body.style.backgroundColor = ev.target.value;
});
inputBox.addEventListener('keyup', ev => {
document.body.style.backgroundColor = ev.target.value;
});
// inputBox.onkeyup = function () {
// document.body.style.backgroundColor = inputBox.value;
// };
Coloris({ // The default behavior is to append the color picker's dialog to the end of the document's // body. but it is possible to append it to a custom parent instead. This is especially useful // if the color fields are in a scrollable container and you want color picker' dialog to stay // anchored to them. You will need to set the position of the container to relative or absolute. // Note: This should be a scrollable container with enough space to display the picker. parent: '.container', // A custom selector to bind the color picker to. This must point to input fields. el: '.color-field', // The bound input fields are wrapped in a div that adds a thumbnail showing the current color // and a button to open the color picker (for accessibility only). If you wish to keep your // fields unaltered, set this to false, in which case you will lose the color thumbnail and // the accessible button (not recommended). wrap: true, // Available themes: default, large, polaroid. // More themes might be added in the future. theme: 'default', // Set the theme to light or dark mode: // * light: light mode (default). // * dark: dark mode. // * auto: automatically enables dark mode when the user prefers a dark color scheme. themeMode: 'light', // The margin in pixels between the input fields and the color picker's dialog. margin: 2, // Set the preferred color string format: // * hex: outputs #RRGGBB or #RRGGBBAA (default). // * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A). // * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A). // * auto: guesses the format from the active input field. Defaults to hex if it fails. // * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A). format: 'hex', // Set to true to enable format toggle buttons in the color picker dialog. // This will also force the format (above) to auto. formatToggle: true, // Enable or disable alpha support. // When disabled, it will strip the alpha value from the existing color value in all formats. alpha: true, // Show an optional clear button and set its label clearButton: { show: true, label: 'Done', }, // An array of the desired color swatches to display. If omitted or the array is empty, // the color swatches will be disabled. swatches: [ '#264653', '#2a9d8f', '#e9c46a', 'rgb(244,162,97)', '#e76f51', '#d62828', 'navy', '#07b', '#0096c7', '#00b4d880', 'rgba(0,119,182,0.8)', ], }); const inputBox = document.getElementById('colorBackground'); inputBox.addEventListener('change', ev => { document.body.style.backgroundColor = ev.target.value; }); inputBox.addEventListener('keyup', ev => { document.body.style.backgroundColor = ev.target.value; }); // inputBox.onkeyup = function () { // document.body.style.backgroundColor = inputBox.value; // };
body { background-color: black; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css" /> <script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script> <br /><br /><br /><br /><br /><br /><br /> <input class="color-field" type="text" id="colorBackground" />
如何使用 VUE JS 使用顏色選擇器/色板動態更改 div 的背景顏色
[英]How to dynamic change the background color of div using color picker/color swatches using VUE JS
如何使用JavaScript控制台通過＃4286f4或任何其他顏色選擇器編號更改背景顏色
[英]How can I use javascript console to change the background color with #4286f4 or any other color picker number
jQuery：如何為contenteditable div創建顏色選擇器？
[英]Jquery: How can I create color picker for contenteditable div?
如何使用javascript值比較更改div元素的背景顏色？
[英]how to change the background color of the div element using javascript value comparison?
如何使用jquery獲取div的文本並設置元素的背景顏色
[英]How to get text of div and set in background color of element using jquery
如何在不單擊按鈕的情況下使用顏色選擇器更改背景顏色？
[英]How to change background color using color picker without click on button?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.