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

Question

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

下面是我当前的代码

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