仿jQuery css 函数自定义可过滤合法属性的mycss函数
canrun
应一个朋友的需求,仿照jQuery的css函数自定义了mycss函数,该函数能过滤合法css属性。源码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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函数,挺不错的,嘿嘿~