用JavaScript修改CSS属性

今天去baidu提问的时候看到baidu的css智能提示觉得很人化，这不回头就写了一个。给大家看看!
请多多指教！！！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
exmpall
</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<STYLE type="text/css">
div{
padding: 0;
margin: 0;
position: absolute;
left:200px; /*左边*/
top:0;   /*上面*/
display: none; 
width: 180px; 
height: 150px;
border-style: solid;
border-color: #E6C963;
border-width: thin;
}
</STYLE>
<SCRIPT TYPE="text/javascript">
<!--
function myfunction1()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "50px";   /*上面*/
my.style.display = "inline"; 
my.style.backgroundColor = "#E4A17C";
}function myfunction2()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "150px";   /*上面*/
my.style.display = "inline"; 
my.style.backgroundColor = "#A3935F";
}function myfunction3()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "200px";   /*上面*/
my.style.display = "inline"; 
my.style.backgroundColor = "#79851A";
}function myfunction4()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "300px";   /*上面*/
my.style.display = "inline"; 
my.style.backgroundColor = "#ACACA9";
}function myfunction5()
{
var my=document.getElementById("chenyi");
my.style.position = "absolute";
my.style.top = "400px";   /*上面*/
my.style.display = "inline"; 
my.style.backgroundColor = "#B38DD9";
}
// -->
</SCRIPT>
</head> <body>
<FORM method="post" action="">
<br /><br />
<INPUT name="text1" type="text" onmouseover="myfunction1()"><br /><br /><br /><br />
<INPUT name="text2" type="text" onmouseover="myfunction2()"><br /><br /><br /><br />
<INPUT name="text3" type="text" onmouseover="myfunction3()"><br /><br /><br /><br />
<INPUT name="text4" type="text" onmouseover="myfunction4()"><br /><br /><br /><br />
<INPUT name="text5" type="text" onmouseover="myfunction5()"><br /><br />
</FORM>
<div id="chenyi">
<ol>
<li><a href="http://hi.baidu.com/515314237/blog/item/88e8844ab0f667fb83025cf8.html">高兴</a></li>
<li>php</li>
<li>asp.net</li>
<li>javaEE</li>
<li>javascript</li>
</ol>
</div>
</body>
</html>

解决方案 »

  1.   

    建议：楼主可以将这5个function抽象为一个。 ^_^
      

  2.   

    然后 控制style用 cssText要好些..
      

  3.   


    style先定义好，然后function myfunction（idx）改为带参数的，然后对其class赋值
      

  4.   


    哥们，我新手，不懂你啥意思，要不帮忙把上面的CODE给改改！谢谢！
      

  5.   

    再给一个实例<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>
    exmpall
    </title>
    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
    <STYLE type="text/css">
    .chenyi {
    padding: 0;
    margin: 0;
    background-image: url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg);/*设置默认图片*/
    width: 300px;/**/
    height: 300px;
    border-style: solid;
    border-color: #E6C963;
    border-width: thin;
    cursor:pointer;
    } ul{
    list-style-type: none;/*取消li前面的园点*/
    }
    .li1{
    position:absolute;
    left: 200px;/*li 区块大小*/
    top:290px;
    text-align:center;/*li文本居中*/
    width: 15px;/*li 大小*/
    height: 15px;/*li 大小*/
    border-style: solid;/*li 边框样式*/
    border-color: #F2D8CA;/*li 边框color*/
    border-width: thin;/*设置li 边框线条*/
    } .li2 {
    position:absolute;
    left: 220px;
    top:290px;
    text-align:center;
    width: 15px; 
    height: 15px;
    border-style: solid;
    border-color: #F2D8CA;
    border-width: thin;
    } .li3 {
    position:absolute;
    left: 240px;
    top:290px;
    text-align:center;
    width: 15px; 
    height: 15px;
    border-style: solid;
    border-color: #F2D8CA;
    border-width: thin;
    }
    </STYLE>
    <SCRIPT TYPE="text/javascript">
    <!--
    function li1() /*触发click事件，改变第一张图片*/
    {
    var my=document.getElementById("chenyi");
    my.style.backgroundImage="url(http://www.stnn.cc/ent_focus/200804/W020080424340598607889.jpg)";
    document.getElementById("li1").style.color = "#FF0300";
    document.getElementById("li2").style.color = "#000000";
    document.getElementById("li3").style.color = "#000000";
    }
    function li2() /*触发click事件，改变第二张图片*/
    {
    var my=document.getElementById("chenyi");
    my.style.backgroundImage="url(http://images.qianlong.com/mmsource/images/2008/01/20/ylhj081200049.jpg)";
    document.getElementById("li1").style.color = "#000000";
    document.getElementById("li2").style.color = "#FF0300";
    document.getElementById("li3").style.color = "#000000";
    }
    function li3()/*触发click事件，改变第三张图片*/
    {
    var my=document.getElementById("chenyi");
    my.style.backgroundImage="url(http://www.ptwbs.net/uploadfile/article/uploadfile/200712/20071227094604381.jpg)";
    document.getElementById("li1").style.color = "#000000";
    document.getElementById("li2").style.color = "#000000";
    document.getElementById("li3").style.color = "#FF0300";
    }
    // -->
    </SCRIPT>
    </head> <body>
    <div id="chenyi" class="chenyi">
    <ul>
    <li id="li1" class="li1" onclick="li1()">1</li>
    <li id="li2" class="li2" onclick="li2()">2</li>
    <li id="li3" class="li3" onclick="li3()">3</li>
    </ul>
    </div>
    </body>
    </html>
      

  6.   

    对于第一个例子
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
        <head>
            <title>exmpall</title>
            <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
            <style type="text/css">
                div 
                {
                    display: none;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    left: 200px;    /*左边*/
                    top: 0;         /*上面*/
                    width: 180px; 
                    height: 150px;
                    border-style: solid;
                    border-color: #E6C963;
                    border-width: thin;
                }
            </style>
        </head>    <body>
            <form method="post" action="">
                <br /><br />
                <input name="text1" type="text" onmouseover="myFunction(this, '#E4A17C')" /><br /><br /><br /><br />
                <input name="text2" type="text" onmouseover="myFunction(this, '#A3935F')" /><br /><br /><br /><br />
                <input name="text3" type="text" onmouseover="myFunction(this, '#79851A')" /><br /><br /><br /><br />
                <input name="text4" type="text" onmouseover="myFunction(this, '#ACACA9')" /><br /><br /><br /><br />
                <input name="text5" type="text" onmouseover="myFunction(this, '#B38DD9')" /><br /><br />
            </form>
            <div id="chenyi">
                <ol>
                    <li><a href="http://hi.baidu.com/515314237/blog/item/88e8844ab0f667fb83025cf8.html">高兴</a></li>
                    <li>php</li>
                    <li>asp.net</li>
                    <li>javaEE</li>
                    <li>javascript</li>
                </ol>
            </div>
        </body>
    </html><script type="text/javascript">
    <!--    function myFunction(elem, color) {
            var me = document.getElementById('chenyi');
            me.style.top = getOffset(elem);
            me.style.backgroundColor = color;
            me.style.display = 'inline';
        }    function getOffset(elem) {
            var offset = 0;
            while (elem.tagName != 'BODY') {
                offset += elem.offsetTop;
                elem = elem.parentNode;
            }
            return offset;
        }
        
    // -->
    </script>