CSS樣式在JS中的巧用

其實，css虛類（未在css檔案中定義具體屬性）還有很多巧用，在大量使用js指令碼和ajax的系統中，巧用css虛類，可以實現很多功能

下面以我實際的開發例子介紹

第一：使用**時，可以通過css虛類作為類選擇器

例如，我在yui的**裡，每一行上都有一列操作列，裡面都是以標籤形式顯示操作，此列都是通過模板動態生成的，所以這些標籤沒有id，而指定這些標籤的響應方法，必須通過**方式，而對應的標籤則通過乙個虛類來指定。其實可以在生成標籤時指定onclick事件，但是顯然沒有**來的好，**不用給每個標籤寫click方法。

下面是某table（yui3的datatable widget）的操作列的定義：

而該table可以定義**並可以使用上的虛類型別來指定響應物件

table.delegate('click', showupdatepanel, '.yui3-datatable-data tr .update', table);
table.delegate('click', deletedata, '.yui3-datatable-data tr .delete, table);

第二，可以使用虛類定義隱藏的資訊

我在某專案裡，需要在滑鼠移動到**裡時浮動顯示tooltip並根據使用者當前選擇動態顯示不同的資訊，這些資訊包括：使用者填寫的備註，領導的批覆，歷史修改記錄，邏輯驗證錯誤提示等，有的是資料載入時一次性載入的（當然也可以選擇根據需要通過ajax載入），有的是根據使用者填寫動態生成的。對此，我的處理辦法是，把這些資訊各自塞到乙個指定了hidden樣式的span標籤裡，然後把span都隱藏到相關的td裡，這樣，在滑鼠移動時，就通過查詢對應的span標籤裡的資訊，然後將這些資訊拷貝到tooltip裡，而判斷當前顯示哪樣資訊，就是通過span標籤額外的虛類樣式了

滑鼠移動的**是這樣的：

warningmousemove: function(e) 
m += k.get('text').replace(/\n/g, "
");                    });
tooltip.setstdmodcontent('body', m);
}else if (e.currenttarget.hasclass('viewnote')) 
else if (e.currenttarget.hasclass('viewmodify')) 
else if (e.currenttarget.hasclass('viewhelp')) 
else if (e.currenttarget.hasclass('viewaudit')) 
if (e.currenttarget.one('.addauditcontent') != null) 
c += e.currenttarget.one('.addauditcontent').get('text').replace(/\n/g, "
");                    }
tooltip.setstdmodcontent('body', c);
}var posx = e.pagex > screen.width * 0.8 ? e.pagex - 200 : e.pagex + 10;
tooltip.move([posx, (e.pagey + 20)]);
if (tooltip.get('visible') === false) 
if (waitingtoshow === false) , 500);
waitingtoshow = true;}}
else if (waitingtoshow == true) 
},

1、允許空或非空

2、只允許整數

3、必須是數字（可以是浮點數）

4、必須大於0

5、有的項和同期相比不能超過20%（超過的必須填寫備註）

6、眾多勾稽關係比較，例如a必須大於b，c必須等於d+e等等

使用者輸入時應當即時提示，並且，使用者輸入完畢後必須進行全部校驗通過方可提交

最初的乙個版本，是將邏輯校驗寫在配置檔案裡，然後通過讀取配置檔案的數學公式進行運算

後來推翻重寫時，放棄了此項，直接將邏輯編寫在**裡，原因麼，主要是維護那個配置檔案太複雜，每次報表改動要折騰死人，而且裡面的項和資料庫字段以及****上的**不匹配

於是解決方法是：非空項上新增虛樣式，統一校驗邏輯裡通過判斷樣式來進行處理

例如：

tdinput為該td的正式樣式，numeric代表此td必須輸入浮點數，blankenabled說明此td允許空著不填，rule說明此td有邏輯校驗關係（具體是哪條則由邏輯校驗**通過td的id來判斷了），noteable則代表此td允許使用者輸入備註資訊，compare說明此td項應當和去年同期的進行比對，如果超過指定比例（20%），則需要提示使用者必須輸入原因（備註）

當使用者結束某td內的輸入時，執行checknode方法

function comparetolastyear(lnode) 
if (thisvalue < lastvalue * 0.8) 
return true;
};function removewarning(classname) );
if (lnode.one('.warningmessage') == null) }};
for (var i = 2; i < arguments.length; i++) }};
function checkzero(lnode) 
return true;
};function checkinput(lnode) 
return true;
};//如果有規則，優先檢測規則
function checknode(lnode) 
if (lnode.hasclass('nonzero')) 
if (lnode.hasclass('compare')) 
};

checkrule方法就不貼了，裡面涉及到報表的具體勾稽關係，numberic和number項，則是寫在使用者輸入完畢後，不在統一的校驗邏輯裡，因為這些項可能允許空

第四，通過css樣式來進行多語言切換

其實這是個偷懶方法，在頁面裡用了多種方法顯示多語言，然後呢，有一部分頁面上不太好通過多語言資源配置的，例如中文和英文順序不一樣（中間還有其它東西），這時可以用english

中文這種模式，然後呢，在指令碼裡判斷下，如果是英文呢，就執行

y.all('.zh').addclass('hidden');
y.all('.en').removeclass('hidden');

CSS樣式在JS中的巧用

Js中設定css樣式

JS 巧用cssText屬性操作樣式

js移除某個樣式 js中如何移除css樣式？

CSS樣式在JS中的巧用

Js中設定css樣式

JS 巧用cssText屬性 操作樣式

js移除某個樣式 js中如何移除css樣式？

相關推薦

JS 巧用cssText屬性操作樣式