用JavaScript动态修改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 myhide()
{
var my=document.getElementById(“chenyi”); //取得id
my.style.display=”none”;    //鼠标移开隐藏
document.getElementById(‘onbno’).value =”网络蛀虫小窝”; //鼠标移开显示内容
}
function myfunction1()
{
var my=document.getElementById(“chenyi”); //取得id
my.style.position = “absolute”; //绝对位置
my.style.top = “50px”;   /*上面*/
my.style.display = “inline”;     //显示对话框
my.style.backgroundColor = “#Efffff”;     //动态改变背景颜色背景颜色
document.getElementById(‘onbno’).value =”www.onbno.com”;  //鼠标在上边显示内容
}
// –>
</SCRIPT>
</head>
<body>
<a href=”http://www.onbno.com”>网络蛀虫小窝</a>
<FORM method=”post” action=””>
<br /><br />
<INPUT  id = “onbno”name=”text1″ type=”text” onmouseover=”myfunction1()” onMouseOut=”myhide()”><br /><br /><br /><br />
</FORM>
<div id=”chenyi”>
<ol>
<li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li>
<li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li>
<li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li>
<li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li>
<li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li>
</ol>
</div>
</body>
</html>

<!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 myhide(){ var my=document.getElementById(“chenyi”); //取得id my.style.display=”none”;    //鼠标移开隐藏 document.getElementById(‘onbno’).value =”网络蛀虫小窝”; //鼠标移开显示内容 }
function myfunction1(){ var my=document.getElementById(“chenyi”); //取得id my.style.position = “absolute”; //绝对位置 my.style.top = “50px”;   /*上面*/ my.style.display = “inline”;     //显示对话框 my.style.backgroundColor = “#Efffff”;     //动态改变背景颜色背景颜色 document.getElementById(‘onbno’).value =”www.onbno.com”;  //鼠标在上边显示内容 }  // –> </SCRIPT> </head>
<body> <a href=”http://www.onbno.com”>网络蛀虫小窝</a> <FORM method=”post” action=””> <br /><br /> <INPUT  id = “onbno”name=”text1″ type=”text” onmouseover=”myfunction1()” onMouseOut=”myhide()”><br /><br /><br /><br /> </FORM> <div id=”chenyi”> <ol> <li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li> <li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li> <li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li> <li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li> <li><a href=”http://www.onbno.com”>网络蛀虫小窝</a></li> </ol> </div> </body></html>

 » 本站地址:http://www.gomoth.com

标签: