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 @   Zjmainstay  阅读(1576)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
SQL AI 助手