第33天：封装自己的class类
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第33天：封装自己的class类相关的知识，希望对你有一定的参考价值。
封装自己的class类，实现浏览器兼容。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>封装自己的class类</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background: pink; 11 margin:10px; 12 } 13 </style> 14 <script> 15 window.onload=function(){ 16 //封装自己的class类名 17 function getClass(classname,id) { 18 //如果浏览器支持，则直接返回 19 if(document.getElementsByClassName){ 20 //有id 21 if(id){ 22 var eleId=document.getElementById(id); 23 return eleId.getElementsByClassName(classname); 24 }else{//没有id的情况 25 return document.getElementsByClassName(classname); 26 27 } 28 } 29 //不支持的情况 30 if(id){ 31 var eleId=document.getElementById(id); 32 var dom=eleId.getElementsByTagName("*"); 33 }else{ 34 var dom=document.getElementsByTagName("*"); 35 } 36 37 var arr=[]; 38 for(var i=0;i<dom.length;i++){ 39 var txtarr=dom[i].className.split(" "); 40 for(var j=0;j<txtarr.length;j++){ 41 if(txtarr[j]==classname){ 42 arr.push(dom[i]); 43 } 44 } 45 } 46 return arr; 47 } 48 //console.log(getClass("test","one").length); 49 //测试 50 /*var aa=getClass("test","one"); 51 for(var i=0;i<aa.length;i++){ 52 aa[i].style.backgroundColor="blue"; 53 }*/ 54 } 55 </script> 56 </head> 57 <body> 58 <div class="test" ></div> 59 <div class="demo"></div> 60 <div class=" demo test"></div> 61 <div id="one"> 62 <div class="demo test"></div> 63 <div class=" test"></div> 64 <div class="demo test"></div> 65 </div> 66 <div></div> 67 </body> 68 </html>
以上是关于第33天：封装自己的class类的主要内容，如果未能解决你的问题，请参考以下文章