作为一个前端开发者，如果想对一些元素循环绑定事件的时候总是出现各种问题，尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查，果然好多初学者有这个困惑，既然这个问题总是出现，于是在我就总结了以下两个比较好理解的解决方案，分享给大家：（可能有更好的方式我没有发现，请各位分享）。

HTML代码:

<div class="textwidget">  
        <span  class="textwidget">第一个</span>  
        <span  class="textwidget">第二个</span>  
        <span  class="textwidget">第三个</span>  
</div>

JS代码:

window.onload = function()   
{               
      var  spans = document.getElementsByClassName("textwidget");
      for(var i = 1; i < spans.length; i++)   
      {  
        spans[i].count = i;  
        spans[i].onmouseover = function()   
        {          
                this.style['margin-top'] = '-145px';
                this.style.display='block';     
        }
        spans[i].onmouseout = function()   
        {          
                this.style['margin-top'] = '0px';
                this.style.display='none';     
        }     
      }   
}

1. 直接设置style的属性  某些情况用这个设置 !important值无效

如果属性有'-'号，就写成驼峰的形式（如textAlign）  如果想保留 – 号，就中括号的形式  element.style['text-align'] = '100px';

element.style.height = '100px';

2. 直接设置属性（只能用于某些属性，相关样式会自动识别）

element.setAttribute('height', 100);

element.setAttribute('height', '100px');

3. 设置style的属性

element.setAttribute('style', 'height: 100px !important');

4. 使用setProperty  如果要设置!important，推荐用这种方法设置第三个参数

element.style.setProperty('height', '300px', 'important');

5. 改变class   比如JQ的更改class相关方法

因JS获取不到css的伪元素，所以可以通过改变伪元素父级的class来动态更改伪元素的样式

element.className = 'blue';
element.className += 'blue fb';

6. 设置cssText

element.style.cssText = 'height: 100px !important';
element.style.cssText += 'height: 100px !important';

　　这里主要分为两种情况，分别是点击锚点实现跳转和点击button按钮实现跳转页面，下面就分别探讨一下两种方式的具体实现代码。
　　一：通过html锚点实现滚动定位到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个html锚点，也就是点击一个A标签超链接实现跳转，可以把A标签的href属性直接指向跳转指定位置的div，代码实现思路如下：
　　<a href="#abc">点击跳转</a>
　　<div id="abc">将要跳转到这里</div>
　　点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处，需要注意的是跳转指定位置div的id是唯一的，A标签直接指向此id，id前面别忘了加上#号。
　　二：通过点击button按钮使用js实现滚定跳转到页面指定位置（DIV）：
　　如果我们要点击实现跳转的地方是一个button按钮的话，由于button不能添加href，所以我们只好使用js跳转代码来实现，具体代码示例如下：
　　<script>
　　　function onTopClick() {
　　　　window.location.hash = "#abc";
　　}
　　</script>
　　<input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
　　<div id="abc">跳转到的位置</div>
　　上面这段代码，点击提交按钮，将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是：页面各元素赋予唯一ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。