更改richselect的輸入顏色

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）接下來，只需獲取該元素的計算背景色並將其設置為“新選擇的”元素即可。

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);            
        }

請在此處檢查代碼段。