Question

我想知道是否可以在运行时更改输入的颜色。

这是我的选择（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的值后，我需要将新选项的背景颜色设置为richselect的背景颜色。

在我看来，它可以通过onChange事件完成，但我不知道我究竟能如何解决它。

有什么建议吗？提前谢谢。

Answer 1

以下是您的解决方案：

http://webix.com/snippet/08e187a7

1）首先，动态获取单击元素的类名以获取该元素

var className = ".webix_list_item." + this.getList().getItem(newV).$css;
var element = document.querySelector(className);

2）接下来，只需获取该元素的计算背景颜色，并将其设置为＆＃34;新选择的＆＃34;元件。

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语句。

Answer 2

感谢@Nikhil的回答，它帮助我以webix方式在richselect上应用我的组合逻辑。

所以，不同之处在于组合我在输入上应用了这个样式，但它正在运行，但适用于 richselect 输入的样式是错误的，而我必须应用 .webix_inp_static 。

<强> 1。 CSS

对于 webix_list_item 上每个自定义CSS的样式，您还必须为 .webix_inp_static 添加css，如下所示：

<style>
  .done .webix_inp_static,.webix_list_item.done { 
    background:#ddf7dd; 
  }
</style>

<强> 2。 onChange功能

如果存在，则必须在oldV上removeCss，并且在newV上addCss为：

onChange:function(newV, oldV){ 
         if(oldV) webix.html.removeCss(this.getNode(), this.getList().getItem(oldV).$css);   
         if(newV) webix.html.addCss(this.getNode(), this.getList().getItem(newV).$css);            
        }

请检查代码段here。

更改richselect的输入颜色

2 个答案: