该如何实现这个效果，请高手指教

偶来试一试！你参考以下
写个函数；
<html>
<head>
<TITLE>测试</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.style1 {background-color:#ff0000}
.style2 {background-color:#ffffff}
</style>
<script>
function setbgcolor(str){
  if(str=="ok"){
    font1.className="style1";
    event.cancelBubble=true;//这个很重要，没有的话会产生气泡事件，功能就无法实现。
    }
  else
font1.className="style2";
}
</script>
</head>
<body onclick="setbgcolor('body')">
<font id=font1 onclick="setbgcolor('ok')">test</font>
</body>
</html>

解决方案 »

  1.   

    <html>
    <title></title>
    <head>
    <style>
    .style1 {background-color:#ff0000}
    .style2 {background-color:#ffffff}
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function tt()
    {
       document.getElementById("font1").className="style1";
    }
    //-->
    </SCRIPT>
    </head>
    <body>
    <input type="button" id="" name="" value="Click Me" onclick="tt()">
    <font id="font1" name="font1">test</font>
    </body>
    </html>
      

  2.   

    也可以用javascript直接控制样式，函数tt修改一下：
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function tt()
    {
       document.getElementById("font1").style.backgroundColor="red"; 
       //red为你要设置的颜色
    }
    //-->
    </SCRIPT>
      

  3.   

    to:lybid2002(无名为名) 你的方法对我没用。你没看清楚我的要求。所以，很抱歉。
      

  4.   

    我想我已经看明白你的意思了。
    你开始的时间就可以设置fong1的classname为style1，如果要改变
    他的样式表，就函数里的那个语句就可以了：
    document.getElementById("fong1").className="style2";
    style2是可以为你自己定义的任意的样式表名。
    如果我认为的这个意思是错的，那就我的错了。
    function tt()
    {
       document.getElementById("font1").className="style1";
    }