通过JS调整CSS风格

在页面中，做成大中小3种字体显示内容：

 

做了2套表格css风格： MTableA：标准的（小字体），MTableA_big：大字体；

通过点击 

<a href="#" onMouseDown="changefont('smallfont');"> 小 </a>

    <a href="#" onMouseDown="changefont('bigfont');" > 大 </a>

来切换字体大小；

 

注意： JS是区分大小写的，如果属性名称大小写不对也不会有作用；

 

执行JavaScript函数：changefont

   调整有几种方式：

1. 页面对象的className重新设值

    document.getElementById('obj').className=”…” 

 

2. 通过style：

 

document.getElementById('obj').style.cssText=”…” 

document.getElementById('obj').style.backgroundColor=”

3.切换css文件：

 看到2种方法：

 1。 首先把所有的css文件加载：

<link   rel= "stylesheet "   href= "/1.css "> 
<link   rel= "stylesheet "   href= "/2.css "> 
......

然后确定使用哪个CSS：需要使用到的css就enable，不需要使用到的，全部disable属性设置成true

   document.styleSheets[i].disabled=true; 

2. 动态切换需要使用到的CSS文件：

页面上， <link rel= "stylesheet " type="text/css" href= "/1.css ">

JavaScript中：document.getElementsByTagName( 'link ')[0].href= '2.css '

这样就切换了css文件

-------------------------------------------------------------------------------------------------

以上3种方式，对应了页面中使用CSS的几种方式：

1. 链接外部文件

     <link rel= "stylesheet " type="text/css" href= "/1.css ">

2. CSS包含在html中

   <style type="text/css">

   ......

   </style>

3. 内联定义

  <table style="font:....." >

 

-------------------------------------------------------------------------------------------------

例子：

 

<script>
function changefont(font) 
{
	var filecontent=document.getElementById("filecontent");
	if( font=="bigfont" ) 
	{
		filecontent.className = "MTableA_big";
	}
	else if( font=="smallfont" )
	{
		filecontent.className = "MTableA";
	}
	
}
</script>

<a href="#" onMouseDown="changefont('smallfont');"> 小 </a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" onMouseDown="changefont('bigfont');"  > 大 </a>

<table class="MTableA" id="filecontent">
。。。。。。。
</table>