在頁面上,我們經常會用到radio, 比如性別:男,女,保密.
但我們不喜歡默認的radio樣式!我們會用其他的來替代.
我最初的做法是, 用label顯示,設置radio為隱藏! (即display:none;)
當我點擊label的時候,同時觸發radio的click事件.
即: ($是jquery)
$(".label1").click(function(){
$(".radio1").click();
// 其他代碼更改樣式,讓label顯示為(非)激活狀態
});
Firefox和Chrome都比較正常, 但IE下杯具了!
進一步調試,發現,原來IE下不會觸發隱藏元素的事件,即有樣式"display:none;"的元素.
這個時候我想到jQuery也有實現這個功能的插件!於是就去查那個插件的源碼,啥也沒查到!
然後Firebug查CSS,終於, clip印入我的眼簾.
在此,引用w3school上的說明:http://www.w3school.com.cn/CSS/pr_pos_clip.ASP
語法:object.style.clip="rect(0px,50px,50px,0px)"
默認值是auto
四個參數,和CSS其他樣式一樣,分別對應:上,右,下,左.
基於元素左上角定位!
即:(上下邊界離上邊的距離,左右邊界離左邊的距離)
上邊界距上邊0
右邊界距左邊50
下邊界距上邊50
左邊界距左邊0
可見這個是顯示元素左上角50×50的范圍
這個CSS樣式要配合絕對定位樣式才會起作用,即下面兩個經常一起出現:
object.style.position="absolute";
object.style.clip="rect(0px,50px,50px,0px)";
回到我們radio的問題,我們不能設置radio "display:none;"
而是設置
position : absolute;
clip : rect(1px, 1px, 1, 1px);
這個時候,radio不再是隱藏的,而是可見的元素,不過通過裁剪(clip),我們實際上是看不見它的, 問題解決!