使用style改变样式

chaoyi

浏览: 309695 次
性别:
来自: 广州

最近访客更多访客>>

hjz

loginboot

szluckboy

1357冬天哈

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-01 ( 21)
2014-12 ( 32)
2014-11 ( 42)
更多存档...

博客分类：

JS 粗浅

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用style改变样式</title>
<style type="text/css">
#left{
	background-image: url(images/left.jpg);
	background-repeat: no-repeat;
	height:32px;
	width:10px;
	}
ul{
	margin: 0px;
	padding: 0px;
	float: left;
}
li{	background-image: url(images/bg1.jpg);
	background-repeat: no-repeat;
	height:32px;
	width:83px;
	text-align:center;
	line-height:35px;
	font-size:14px;
	color:#ffffff;
	font-weight:bold;
	list-style:none;
	float:left;
	}

</style>
</head>

<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   
<tr>
    <td colspan="10"><img src="images/top.jpg" alt="logo"/></td>
  </tr>
  <tr>
  <td id="left"></td>
  <td style="width:664px;">
  <ul>
    <li>首 页</li>
    <li>家用电器</li>
    <li>手机数码</li>
    <li>日用百货</li>
    <li>书 籍</li>
    <li>帮助中心</li>
    <li>免费开店</li>
    <li>全球咨询</li>
    </ul>
    </td>
    <td><img src="images/search.jpg" alt="搜索"/></td>
  </tr>
</table>
<script type="text/javascript">
	//获取标签
	var objLi=document.getElementsByTagName("li");
	//根据li标签多少个进行添加样式
	for(var i=0;i<objLi.length;i++){
		//鼠标移到某元素之上
		objLi[i].onmouseover=function(){
			//背景图
			this.style.backgroundImage="url(images/bg2.jpg)";
			//字体颜色
			this.style.color="#000";
			//像素
			this.style.fontSize="15px";
		}
		//鼠标从某元素行色移开
		objLi[i].onmouseout=function(){
			this.style.backgroundImage="url(images/bg1.jpg)";
			this.style.color="#fff";
			this.style.fontSize="15px";
		}
	}
</script>
</body>
</html>

效果图：