js-getAttribute与setAttribute的用法

         今天UI出图里有一个小小的特效，鼠标滑过图标时，图标更换颜色（字体图标本身和北京）正常情况下UI会提供相应的字体图标然后css:hover就可以搞定了，但是UI说没有，只有psd原图还得自己换颜色，本来打算自己把图片转换给字体图标，后来一想好像可以用JS来实现，在加上又是一个小网站，用户对相应速度要求很低（其实是我发现生成字体图标好麻烦还要下载AI），于是我就打算用JS来实现，正好练练手。

我的思路是这样的，把<img>标签放在<a>标签内，并在<a>标签内添加两个自定义属性，鼠标滑入和滑出时调用不同的属性，来实现相应的效果，html如下：

	<a href="#" hover-xz="images/in-xy-_03.jpg" hover-mr="images/in-bs-_03.jpg">

		<img src="images/in-bs-_03.jpg" alt="">

	</a>

     在写js时犯了一个很low的错误，a.hover=function(){};     webstorm代码提示内无问题，浏览器检测语法无问题就是运行不了，百度一下后才发现js内没有hover ，jquery才有，丢人啊....

onmouseover:当鼠标进入目标时触发事件；

onmouseout:当鼠标滑出目标时触发事件；

因为图标有很多所有用了一个小小的for循环：

window.οnlοad=function(){
           var selectTb = document.getElementById('selectTb');// 这里获取了一下所有a的父元素;
          var selectA = selectTb.getElementsByTagName('a');   //获取该ID下的所有a标签;
	for(var i = 0; i <selectA.length;i++){
		selectA[i].οnmοuseοver=funciton(){
			this.getElementsByTagName('img')[0].src = this.getAttribute('hover-xz');//img后的[0]一定要加上，都是泪啊。。。
		}
		selectA[i].οnmοuseοver=funciton(){
			this.getElementsByTagName('img')[0].src = this.getAttribute('hover-mr');



	}
}



也许有的朋友会问我为什么不用setAttribute,因为setAttribute('属性名'，'属性值')；这里的属性值时不接受自定义的变量或者代码的，你在这里写入什么就直接传入什么；

同时我还学习了一个命令 
removeAttribute,可以删除自定义的属性值，而且连<div style=""></div> 中的style都可以移除，学习了；