In my previous impression, the page font properties, backgrounds, and other styles in the page is basically fixed after loading, but today see can be modified by JS page style, feel the need to share with you.
Test.html
Product Name |
Airplane |
Big car |
Trigger events to change the style of the pageTrigger Event Change page style
Now the page text style, background, font size, are the system default, later, to show you the results of the run, you can compare the next OH
Test.js
function SetStyle1 () { //change the style of the table to Style1 //Get the HTML reference otable = document.getElementById ("table"); Otablehead = document.getElementById ("Tablehead"); Otablefirstline =document.getelementbyid ("Tablefirstline"); Otablesecondline = document.getElementById ("Tablesecondline"); Set style Otable.classname = "Table1"; Otablehead.classname = "TableHead1"; Otablefirstline.classname = "TableContent1"; Otablesecondline.classnamee = "TableContent1";} function SetStyle2 () { //change the style of the table to Style2 //Get a reference to the HTML element otable = document.getElementById ("table"); Otablehead = document.getElementById ("Tablehead"); Otablefirstline =document.getelementbyid ("Tablefirstline"); Otablesecondline = document.getElementById ("Tablesecondline"); Set style 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;}
The results are as follows:
In addition, these points of knowledge can be used in UIWebView and JS interaction Oh, below to show you the operation and effect OH
Demo Address for iOS: Demo