• 2009-04-03

    ff专用的样式表管理器 - [技术空间]

    版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://www.blogbus.com/lily64-logs/37425213.html

    做css的同事提了一个样式表管理需求,于是写了一个ff下的样式表管理器小工具,用于对htm页面所有className的提取和css文件里面的对应性检索。代码存档。
    <script>
    myarr=new Array();
    j=0;
    findit=false;
    color="black";
    bgcolor="ligthgreen";
    function in_array(needle, haystack) {
      if(typeof needle == 'string' || typeof needle == 'number') {
      for(var i in haystack) {
      if(haystack[i] == needle) {
      return true;
      }
      }
      }
      return false;
    }
    function getclass()
    {
    myarr.length=0;
    str=document.getElementById("ifrm1").contentWindow.document.documentElement.innerHTML;
    var patt = new RegExp("class=\"(.+?)\"","g");
    var result;
    while ((result = patt.exec(str)) != null) {
    if(in_array(result[1],myarr))continue;
    myarr.push(result[1]);
    }
    patt = new RegExp("id=\"(.+?)\"","g");
    while ((result = patt.exec(str)) != null) {
    if(in_array(result[1],myarr))continue;
    myarr.push(result[1]);
    }
    alert("classnames: "+myarr);
    }
    function myset(i)
    {
    j=0;
    document.getElementById('ifrm'+i).src=document.getElementById('myfile'+i).value;
    }
    function StartReplace(word,color,bgcolor){
      var s,n;
      s = document.getElementById("ifrm2").contentWindow.getSelection();
      bgcolor="rgb("+(0+j)+","+(255-j)+","+(0+j)+")";
      while(document.getElementById("ifrm2").contentWindow.find(word)){
      findit=true;  
      var a = document.createElement("span");
      a.style.color=color; 
      a.style.backgroundColor=bgcolor;
      s.getRangeAt(0).surroundContents(a);
      }
      s.removeAllRanges();
      if(findit){j=j+10;if(j>255)j=j-256;findit=false;}
    }
    function rep()
    {
    for(i=0;i<myarr.length;i++)
    StartReplace(myarr[i],color,bgcolor);
    document.getElementById("mydiv").innerHTML=document.getElementById("ifrm2").contentWindow.document.documentElement.innerHTML;
    }
    </script>
    <div style="width:600px;float:left">html:<input type=file id=myfile1 onchange=myset(1) /><input type="button" value="getclass" onclick=getclass() /></div>
    <div style="margin-left:20px;width:600px;float:left">css:<input type=file id=myfile2 onchange=myset(2) /><input type="button" value="search" onclick='rep()' /></div>
    <br />
    <iframe id=ifrm1 style="width:600px;height:680px;float:left"></iframe><iframe id=ifrm2 style="margin-left:20px;width:600px;height:680px;float:left"></iframe>

    分享到:

    历史上的今天: