在我以前的印象里，页面的字体属性，背景，等样式在页面加载后基本上都是固定的了，但是今天看到可以通过js修改页面的样式，觉得有必要和大家分享下。
test.html
css ajax product name
airplane
big car
触发事件改变页面的样式触发事件改变页面样式
现在页面的文字样式，背景，字体大小，都是系统默认的，待会儿，给大家演示下运行结果，可以比较下哦
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