jquer怎麼給combobox加背景顏色

2019-12-12 06:42:11

combobox是Easyui提供的一個下拉式方塊元件，此篇我們來談談如何使用jquery給combobox增加背景色。

1

我們可以到Easyui官網下載到Easyui的元件庫。

2

元件庫解壓後的結構大致如圖。我們需要引入的只有themes/default下的sasyui.css，和根目錄下的jquery.min.js與jquery.easyui.min.js

3

接著我們寫一個簡單的html頁面進行測試，頁面上放入兩個combobox元件。

4

使用瀏覽器開啟這個頁面，檢視最後生成的元件結構。我們可以看到Easyui將原有的select輸入框隱藏（意味著我們對select的樣式修改並不會影響到元件），並且在select輸入框後加入一個span用於最終的操作。

5

需要使用jquery修改這部分的背景色，我們可以以id為選擇器找到下一個span節點並為其賦上背景色。修改頁面程式碼並檢視顯示效果。

6

顯示的效果比對發現中間有一塊未受到影響，我們可以在瀏覽器元素檢視中看到這是一個text型別的輸入框，因此我們還需要修改這個位置的樣式。修改程式碼並檢視效果。

7

目前為止，元件的背景色已經被改變了，但元件下拉項的背景色還未被改變。我們在瀏覽器元素檢視裡找到這個下拉項，發現Easyui在頁面底部生成了一個div用於展示下拉項。

8

由於兩個元件的下拉區域幾乎沒有區別，我們只能夠根據元素區域位置來找到並修改這個樣式，即如果是第一個元件，則取第一個div。如果是第二個元件則取第二個div。這裡我選擇了第一個進行修改，然後檢視效果。

9

效果符合預期，並且我們將樣式的侵入性盡可能的降低了，並未對另一個元件造成影響。

下面貼出最終生效的程式碼：

$('#cc').next('span').css("background-color","#00FFFF").find('input').css("background-color","#00FFFF");$('.combo-p').first().find('.panel-body').css("background-color","#00FFFF");

10

以上即是本篇的全部內容，感謝閱讀。

jquer怎麼給combobox加背景顏色

1

2

3

4

5

6

7

8

9

10

熱門文章