PHP Development of JS modify page CSS style

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

