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

我已经创建了一个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.scss

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

.stileone {
    background: green
}

---

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

我认为您所需要的只是：

组件端：

color = 'transparent';

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

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

模板端：

color = 'transparent';

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

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

Div内容

---

当我点击按钮时，调用文本选择器，我需要从中进行选择，请更新代码以实现此目的。您的代码正常，但我需要实现的方式不正常，我可以在聊天室中共享team viewer吗？我从本地存储中提取代码，在html上显示如下-

好的，如果您可以从html页面上的ts调用html，然后使其正常工作？您将需要一个DOMSanize管道..因为我正在从本地存储调用html，并且我在单击`$（“.stileone”）时使用了此代码。在（“单击”，function（）{$（this.css（“背景”，“红色”）；}）时使用了此代码只需将其更改为颜色选择器