我们常常通过直接定义 input 标签的样式来美化文本框、按钮、单选框、多选框等 input 标签。例如,我们在 .css 文件或者 style 标签中定义如下的样式:
input {border:1px blue solid;}
然后,我们所有的input标签,包括按钮、文本框、单选框等都有了一个1象素宽的蓝色实体边框的修饰了。然而我个人很不喜欢单选框和复选框应用这种实体边框的样式,同时又不希望直接修改 input type="radio" 或者 input type="checkbox" 的标签样式,因为那样会破坏整个文档结构,零散的样式设置也不便于日后的维护。也许你也希望赋予不同类型的 input 以不同的样式。
那么,不直接修改具体的某一个标签,而通过修改我们事先定义好的统一样式文件如何做到这一点呢? 也许聪明的你,应该已经想到些什么了。 对了,答案就是:利用 css 的 expression 功能。
下面是我的一个示例,您可以复制粘贴为一个HTML文件,然后进行查看。
<html> <head> <style> input {border: expression(input_test(this))} </style> <script> function input_test(obj) { switch (obj.type) { case 'text': return '1px blue solid'; case 'button': return '1px black solid'; case 'radio': return '1px red solid'; case 'checkbox': return '1px green dotted'; default: return ';'; } } </script> </head> <body> <input type="text" size="30" /> <input type="radio" value="1" name="radio1" /> <input type="checkbox" /> <input type="button" value=" Button " /> </body> </html>
|
转自http://hi.baidu.com/xiaochong0522/blog/item/6314b1f03417bac67931aae7.html 。(吃水不忘挖井人)