使用颜色选择器更改 div 的背景颜色

Question

我已经创建了一个div，当我点击它时，它的颜色从green变成了red。我想添加一个按钮，单击它会出现一个颜色选择器，我选择的颜色将成为它的背景。

下面是我当前的代码

home.html

        <div class="stileone">
            Div Content
        </div>

//I want code on this button click to select color from color picker and selected color shall become the div's background color
    <button ion-button (click)="select_color()">Select Color</button>

home.ts

ngOnInit(){
$(".stileone").on("click", function() {
        $(this).css("background", "red");
    }); 
}

home.scss

.stileone {
    background: green
}

请注意，我在上面的代码中使用了 js，我很好，我可以使用 Ionic 或 JS，两者都适合我。对于 HTML 操作，我使用的是 DOM sanitizer，所以我可以使用 JS 或 jQuery。

Answer 1

我想你只需要：

组件端：

color = 'transparent';

select_color(){
    this.color = this.getRandomColor();
}

模板端：

<div class="stileone"  [ngStyle]="{'background-color': color}">
    Div Content
</div>

WORKING DEMO