JS访问meta和css的例子

利用js可以 很轻松的访问到网页中的meta 也可以处理css。下面就是一个相关的简单例子。

 

< html >
< head >
< meta  name ="myName"  content ="NorthSnow"   />
< meta  name ="myCity"  content ="Chang Chun"   />
< meta  name ="myCareer"  content ="IT"   />
< meta  name ="myDream"  content ="more and more simple"   />
< title > this is a test </ title >
< style  type ="text/css" > ...
     .css1 {...}{
             color:red;font-weight:bold;
           }
           
     .css2 {...}{
             color:blue;font-weight:normal;
           }
      p    {...}{
             color:#777777;
           }
  </ style >
 
  < style  type ="text/css" > ...
     .css3 {...}{
             color:green;font-weight:bold;
           }
           
     .css4 {...}{
             color:yellow;font-weight:normal;
           }
  </ style >

< script  language ="javascript" > ...
function showMeta()
...{
    var metas = document.getElementsByTagName("meta");
    var strMeta=new String();
    var strTemp;
    for(var i=0;i < metas.length;i++)
    ...{
        strTemp=metas[i].name + "=" + metas[i].content + " ";
        strMeta=strMeta.concat(strTemp);
    }
    alert(strMeta);
}

function showCss()
...{

    var cSSs = document.styleSheets;
    var strCss=new String();
    var strTemp;
    alert(cSSs.length);
    for(var i=0;i < cSSs.length;i++)
    ...{
        var cRules=cSSs[i].rules;
        for(var j=0;j<cRules.length;j++)
        ...{
            strTemp=cRules[j].style.cssText + " ";
            strCss=strCss.concat(strTemp);
        }
    }
    alert(strCss);
}

function setCss()
...{
   document.styleSheets[0].rules[0].style.cssText='color:#8040f0';
}
</ script >
</ head >
< body >
   < form  name ="frmTest" >
     < input  type ="button"  name ="b1"  value ="获得meta"  onclick ="showMeta();" />
     < input  type ="button"  name ="b2"  value ="获得css"  onclick ="showCss();" />
     < input  type ="button"  name ="b2"  value ="设置css"  onclick ="setCss();" />
   </ form >
   < span  class ="css1" > My Name is NorthSnow </ span >
</ body >
</ html >