如何使用按鈕更改顏色？
[英]how can i change color using button?
問題描述
這是一個引導顏色選擇器。 我想使用 div 內的按鈕，當我單擊按鈕時，它會顯示顏色圖表並更改 div 的背景顏色。 我怎樣才能做到這一點？
<div class="row">
<div class=" col-sm-4 border border-primary picker">
<!-- add a button here -->
<button class=" btn btn-primary"> clolor </button>
<h4> colopicker</h4>
</div>
<div class=" col-sm-8">
</div>
</div>
</div>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="src/colorPick.js"></script>
<script>
$(".picker").colorPick({
'initialColor': 'onColorSelected',
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
'onColorSelected': function() {
console.log("The user has selected the color: " + this.color)
this.element.css({
'backgroundColor': this.color
});
}
});
</script>
3 個解決方案
解決方案1
0 2019-10-21 10:04:21
只需在 div 中添加 1 個按鈕，然后調用單擊按鈕事件即可顯示顏色圖表。 這是一個示例。 希望對你有所幫助，我的朋友：））
<div class="row">
<div class=" col-sm-4 border border-primary picker">
<!-- add a button here -->
<input type="button" id="btnShow" value="Choose color">
<h4> colopicker</h4>
</div>
<div class=" col-sm-8">
</div>
</div>
$(document).ready(function(){
$('#btnShow').on('click', function(){
$(".picker").colorPick({
'initialColor': 'onColorSelected',
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
'onColorSelected': function() {
console.log("The user has selected the color: " + this.color)
this.element.css({
'backgroundColor': this.color
});
}
});
});
});
解決方案2
0 2019-10-21 10:06:58
看看，你的代碼的工作示例
https://codepen.io/de-co/pen/xxxgKby
<script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
<link href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css" rel="stylesheet" type="text/css">
<div class="row">
<div class=" col-sm-4 border border-primary picker">
<!-- add a button here -->
<Button >colopicker</Button>
<h4> colopicker</h4>
</div>
<div class=" col-sm-8">
</div>
</div>
</div>
<script>
$('button').click(function(){
$(".picker").colorPick({
'initialColor': 'onColorSelected',
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
'onColorSelected': function() {
console.log("The user has selected the color: " + this.color)
$('button').css({
'backgroundColor': this.color
});
}
});
});
</script>
解決方案3
0 2019-10-21 10:13:44
<html>
<head>
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.css">
</head>
<body>
<div class="row">
<div class=" col-sm-4 border border-primary ">
<button class=" btn btn-primary picker"> clolor </button>
<h4> colopicker</h4>
</div>
<div class=" col-sm-8 show_color">
Show color
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick-js/colorPick.js"></script>
<script>
$( document ).ready(function() {
$(".picker").colorPick({
'initialColor': 'onColorSelected',
'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1"],
'onColorSelected': function() {
console.log("The user has selected the color: " + this.color);
/*this.element.css({
'backgroundColor': this.color
});*/
$('.show_color').css('backgroundColor',this.color);
}
});
});
</script>
</body>
</html>
我已經根據 colorpick.js 插件https://www.jqueryscript.net/other/Flat-HTML5-Palette-Color-Picker-For-jQuery-colorPick在代碼中添加了 document.ready 和 CSS 鏈接-js.html
ready() 方法用於在加載文檔后使 function 可用。 一旦頁面 DOM 准備好執行 JavaScript 代碼，您在 $(document).ready() 方法中編寫的任何代碼都將運行。
如何使用JavaScript更改當前頁面的導航按鈕/鏈接的背景顏色？
[英]How can I change the background color of a current page's navigation button/link using JavaScript?
如何通過單擊位於所述標記的信息窗口中的按鈕來更改標記的顏色（使用傳單）？
[英]How can I change the color of the markers (using leaflet), by click a button that is located in the infowindow of said marker?
在 Ionic/Angular 中使用 ngIf 時，如何根據按鈕的值更改按鈕的顏色
[英]How can I change the color of my button based on its value when using ngIf in Ionic/Angular
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.