HTML元素对象的clip实现可填写的下啦列表
2007-06-22 14:49
190 查看
clip属性,基本上dom对象都有这个属性,用来剪切对象的可见范围。
语法:
值:
以object的左上角为坐标原点,x轴向左,y轴向下,跟屏幕的坐标系方向一致,只是移动了原点。
在这个坐标系中,设置一个clip,这个clip的top,right,bottom,left 的位置由以上几个参数设置,在这个clip的范围之内才可以显示。之外的为透明。
注意:position的属性必须为absolute。
利用这个特性,可以做既可以写又可以选择的下拉框。
原理就似乎利用一个input和一个select,将二者重合,并且剪切select,只显示select的下拉按钮。
代码如下:
<select id="slt" name="slt" style="position:absolute; width:200px; left:50px; clip:rect(0px 200px 25px 180px)" onchange="document.getElementById('txt').value=this.options[this.selectedIndex].text;">
<option value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" id="txt" style="left:50px; width:190px; position:absolute;" />
语法:
HTML | { clip : sClip } |
---|---|
Scripting | object.style.clip [ = sClip ] |
sClip | 字符串值,如下两种类型:
|
在这个坐标系中,设置一个clip,这个clip的top,right,bottom,left 的位置由以上几个参数设置,在这个clip的范围之内才可以显示。之外的为透明。
注意:position的属性必须为absolute。
利用这个特性,可以做既可以写又可以选择的下拉框。
原理就似乎利用一个input和一个select,将二者重合,并且剪切select,只显示select的下拉按钮。
代码如下:
<select id="slt" name="slt" style="position:absolute; width:200px; left:50px; clip:rect(0px 200px 25px 180px)" onchange="document.getElementById('txt').value=this.options[this.selectedIndex].text;">
<option value="0" selected="selected"></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="text" id="txt" style="left:50px; width:190px; position:absolute;" />
相关文章推荐
- C#中的IComparable 和 IComparer 接口,实现列表中的对象比较和排序
- 简单快速开发C\S架构程序用最简单的不分层最快的效率达到功能要求的例子程序FrmCommnets 显示某个对象的评论列表的功能实现
- Struts2+JSON 实现AJAX 返回对象和列表
- Ajax详解及其案例分析之如何获得Ajax对象,使用Ajax对象发送GET和POST请求,校验用户名,POST和GET请求时的乱码处理,实现级联的下拉列表
- Python3实现的字典、列表和json对象互转功能示例
- c++:成员对象,基类初始化列表 接口与实现分离
- Struts2+JSON 实现AJAX 返回对象和列表
- python的整数字符串列表字典对象的实现原理
- java中List对象列表实现去重或取出及排序的方法
- 实现Comparable接口对存放自定义对象列表(数组)进行排序
- JAVAEE学习——hibernate02:实体规则、对象状态、缓存、事务、批量查询和实现客户列表显示
- VC++实现的类似Delphi的TStringList对象列表类
- Python列表对象实现原理
- intent 实现对象或者列表的传递
- 将List对象列表转换成JSON格式的类实现方法
- Java 泛型-实现对象列表
- Python列表对象实现原理
- ssh和springside 实现ajax返回对象列表
- JS实现选定指定HTML元素对象中指定文本内容功能示例
- 对象列表的实现