认识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),我们实际上是看不见它的, 问题解决!