在页面中,做成大中小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>
<a href="#" onMouseDown="changefont('bigfont');" > 大 </a>
<table class="MTableA" id="filecontent">
。。。。。。。
</table>