认识css样式clip: 认识隐藏页面元素的另一个技巧
在页面上,我们经常会用到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),我们实际上是看不见它的, 问题解决!
