js数组改变样式 - ITeye问答

0 0

js数组改变样式5

使用数组改变样式,js没有执行

<html>
<head>
  <title>style改变样式</title>
</head>
<style type="text/css">
 li{
    font-size:12px;
	color:#000000;
	background:#f7f7f7;
	width:104px;
	height:33px;
	line-height:38px;
	float:left;
	list-style:none;
	text-align:center;
	margin-left:2px;
 }
 </style>
 <script type="text/JavaScript">
 // document.getElementsByTagName("li"); 获取所有的li标签
   var len = document.getElementsByTagName("li"); 
   //为每一个li设置事件和效果
   for(var i=0;i < len.length;i++){
        len [i].onmouseover = function(){
		 this.style.background="#777777";
		 }
		len [i].onmouseout =  function(){
		  this.style.background="#f7f7f7";
		 }
   }
 </script>
 
<body>
	<ul>
      <li>新闻</li>
	  <li>视频</li>
	  <li>小说</li>
	</ul>
</body>
</html>

JavaScript

2014年11月10日 15:33

百合不是茶
21
0 0 3

3个答案按时间排序按投票排序

0 0

上面两位都说得对。
首先，要加一个载入完成事件。原生的是window.onload=function(){}。jQuery是$(function(){});
其次，这个问题没必要写js，用li:hover就可以实现效果了。

最后，如果非要使用js来实现，我建议使用事件代理方式，应为给每一个li绑定事件的效率实在太低了。

2014年11月12日 11:17

zccst
30
0 0 1

添加评论

0 0

不需要js实现的方式：
<style type="text/css">
li{
    font-size:12px;
    color:#000000;
    background:#f7f7f7;
    width:104px;
    height:33px;
    line-height:38px;
    float:left;
    list-style:none;
    text-align:center;
    margin-left:2px;
}
li:hover{
background:#777777;
}
</style>

2014年11月10日 16:55

wmjmath
30
0 0 0

1条评论

0 0

准备事件没有放在ready事件里面
<html>
<head>
<title>style改变样式</title>
</head>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<style type="text/css">
li{
    font-size:12px;
    color:#000000;
    background:#f7f7f7;
    width:104px;
    height:33px;
    line-height:38px;
    float:left;
    list-style:none;
    text-align:center;
    margin-left:2px;
}
</style>
<script type="text/JavaScript">
// document.getElementsByTagName("li"); 获取所有的li标签
$(document).ready(function(){

   var len = document.getElementsByTagName("li");
   alert(len);
   //为每一个li设置事件和效果
   for(var i=0;i < len.length;i++){
        len [i].onmouseover = function(){
         this.style.background="#777777";
         }
        len [i].onmouseout = function(){
          this.style.background="#f7f7f7";
         }
   }
});
</script>

<body>
    <ul>
      <li>新闻</li>
      <li>视频</li>
      <li>小说</li>
    </ul>
</body>
</html>