Tips:点此可运行HTML源码

仿jQuery css 函数自定义可过滤合法属性的mycss函数

canrun

应一个朋友的需求,仿照jQuery的css函数自定义了mycss函数,该函数能过滤合法css属性。源码如下:

View Code
 1 <html>
 2 <head>
 3     <title>jQuery mycss</title>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta http-equiv="Content-Language" content="zh-CN" />
 6     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 7     <!--<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>-->
 8 </head>
 9 <body>
10 <script type="text/javascript">
11 $(document).ready(function(){    
12     jQuery.extend({
13         //mycss 函数合法属性
14         mycssAccess : false
15     });
16     jQuery.fn.extend({
17         //仿了jquery-1.8.0.js中的css: function( name, value )
18         mycss: function( name, value ) {
19             //自定义过滤处理
20             var access = (typeof(jQuery.mycssAccess) == 'object')?jQuery.mycssAccess:[];
21             // css("height",2000) 的情况
22             if(typeof(name) != 'object' && !access.in_array(name)) return false;
23             // css({"height":200,"width":300}) 的情况
24             else {
25                 $.each(name,function(n,val){
26                     //非法则注销该变量
27                     if(!access.in_array(n)) name[n] = null;
28                 })
29             }
30             
31             
32             return jQuery.access( this, function( elem, name, value ) {
33                 return value !== undefined ?
34                     jQuery.style( elem, name, value ) :
35                     jQuery.css( elem, name );
36             }, name, value, arguments.length > 1 );
37         }
38     });
39     //定义in_array函数
40     Array.prototype.S=String.fromCharCode(2);
41     Array.prototype.in_array=function(e) {
42         var r=new RegExp(this.S+e+this.S);
43         return (r.test(this.S+this.join(this.S)+this.S));
44     }
45     
46     //mycss函数测试
47     jQuery.mycssAccess = ["height","display","background-color"];
48     //下面的width,float属性将被过滤掉
49     $("#abc").mycss({"height":200,"width":300,"background-color":"#ABC","float":"left","display":"block"});
50 });
51 </script>
52 <div id="abc">abc</div>
53 </body>
54 </html>

 

其中引用了一个《判断js数组包是否包含某个元素》的in_array函数,它的功能类似php的in_array函数,挺不错的,嘿嘿~

posted @ 2012-08-12 23:46  Zjmainstay  阅读(1573)  评论(0编辑  收藏  举报