php开发之js修改页面css样式

在我以前的印象里，页面的字体属性，背景，等样式在页面加载后基本上都是固定的了，但是今天看到可以通过js修改页面的样式，，觉得有必要和大家分享下。 test.html

>==”text/javascript” src =”test.js”>==>><th id =”tableHead”>Product Name><td id =”tableFirstLine”>AirPlane><td id =”tableSecondLine”>Big car>==”setStyle1()”/>触发事件改变页面的样式=”set style 2″ onclick =”setStyle2()”/>触发事件改变页面样式</body></html>

现在页面的文字样式，背景，字体大小，都是系统默认的，待会儿，给大家演示下运行结果，可以比较下哦

test.js

function setStyle1(){ //将表的风格改为style1//获取html的引用oTable = document.getElementById(“table”);oTableHead = document.getElementById(“tableHead”);oTableFirstLine =document.getElementById(“tableFirstLine”);otableSecondLine = document.getElementById(“tableSecondLine”);//设置风格oTable.className =”Table1″;oTableHead.className =”TableHead1″;oTableFirstLine.className =”TableContent1″;oTableSecondLine.classNamee =”TableContent1″;}function setStyle2(){ //将表格的风格改为style2//获取html元素的引用oTable = document.getElementById(“table”);oTableHead = document.getElementById(“tableHead”);oTableFirstLine =document.getElementById(“tableFirstLine”);otableSecondLine = document.getElementById(“tableSecondLine”);//设置风格oTable.className =”Table2″;oTableHead.className =”TableHead2″;oTableFirstLine.className =”TableContent2″;oTableSecondLine.classNamee =”TableContent2″;}

styles.css

/* @CHARSET “GB18030”; */.Table1{border:DarkGreen 1px solid;background-color:LightGreen;}.TableHead1{font-family:Verdana,Arial;font-weight:bold;font-size:10pt;}.TableContent1{font-family:Verdana,Arial;font-size:10pt;}.Table2{border:DarkBlue 1px solid;background-color:LightBlue;}.TableHead2{font-family:Verdana,Arial;font-weight:bold;font-size:10pt;}.TableContent2{font-family:Verdana,Arial;font-size:10pt;}

运行效果如下：

另外这些知识点可以用在UIWebView与js的交互上哦，下面给大家演示下运行及效果哦

iOS的demo地址：demo

在开始时却总是不厌其烦地渗透入生活的缝隙，