我想知道是否可以在运行时更改输入的颜色。
这是我的选择 (Webix ui.richselect):http://webix.com/snippet/c64f9b12
{
view:"richselect", label:"Status", options:[
{ id:1, value:"Done", $css:"done" },
{ id:2, value:"Processing", $css:"process" },
{ id:3, value:"On hold", $css:"on-hold" },
{ id:4, value:"Failed", $css:"failed" },
],
on:{
onChange:function(newV, oldV){
webix.message("Status changed to "+this.getList().getItem(newV).value)
}
}
}
每个 $css
键都与应用于该元素的 CSS 类相关。
<style>
.webix_list_item.done {
background:#ddf7dd;
}
<!-- . . . -->
.webix_list_item.webix_selected {
color:black;
font-weight:bold
}
</style>
改变richselect的值后,我需要将新选中的item的背景色设置为richselect的背景色。
在我看来,可以通过onChange
事件来完成,但我不知 Prop 体如何解决。
有什么建议吗?提前致谢。
最佳答案
这是您的解决方案:
http://webix.com/snippet/08e187a7
1)首先,动态获取点击元素的类名,以便获取该元素
var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);
2) 接下来,获取该元素的计算背景颜色并将其设置为“新选择”元素。
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
我只写了一行,您可以创建变量并将其分解为更多语句。说些类似的话-
var clicked_bgcolor = window.getComputedStyle(element,null).getPropertyValue("background-color");
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = clicked_bgcolor;
不过我更喜欢在一行中完成这两个(如上所述)。
所以你的最终onChange
代码将是:
on:{
onChange:function(newV, oldV){
webix.message("Status changed to "+this.getList().getItem(newV).value);
var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);
document.querySelector(".webix_el_richselect .webix_inp_static").style.backgroundColor = window.getComputedStyle(element,null).getPropertyValue("background-color");
}
}
如果有任何问题,请告诉我。
PS:尽量多使用 JQuery,你可以避免这么冗长复杂的 JavaScript 语句。
关于javascript - 改变 richselect 的输入颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40285679/