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

也许有的朋友会问我为什么不用setAttribute,因为setAttribute('属性名'，'属性值')；这里的属性值时不接受自定义的变量或者代码的，你在这里写入什么就直接传入什么；
同时我还学习了一个命令 removeAttribute,可以删除自定义的属性值，而且连<div style=""></div> 中的style都可以移除，学习了；

                                             
        0        0           
	
				
	
					   
js-getAttribute与setAttribute的用法
	  	   
getAttribute 与 setAttribute 用法
	  	   
学习笔记---getAttribute与setAttribute 的用法
	  	   
js中setAttribute()和getAttribute()用法
	  	   
getAttribute,setAttribute用法示例
	  	   
setAttribute()与getAttribute()
	  	   
getAttribute/setAttribute的使用
	  	   
设置 取消input的disabled属性 getattribute(),setAttribute(),removeattribute()用法
	  	   
关于JSP中getAttribute()和setAttribute()的用法
	  	   
request.getAttribute()与request.setAttribute()
	  	   
request.getAttribute()与request.setAttribute()
	  	   
InvocationTargetException异常的深入研究-servlet的setAttribute与getAttribute
	  	   
InvocationTargetException异常的深入研究-servlet的setAttribute与getAttribute
	  	   
getAttribute()、setAttribute()和getParameter()的联系与区别
	  	   
setAttribute和getAttribute的区别
	  	   
getAttribute 和setAttribute 的使用方法
	  	   
request.setAttribute()、session.setAttribute()和request.getParameter()、request.getAttribute()的联系与区别
	  	   
jsp中setAttribute,getAttribute和getParameter用法
	     		  
	  	   
python与c++的区别
	  	   
引入css的几种方法
	  	   
创建eclipse新的workspace并设置workspace共享配置
	  	   
java自学日记 day 08
	  	   
我的科研生活2017-3-13
	  	   
js-getAttribute与setAttribute的用法
	  	   
39.平衡二叉树
	  	   
Android基础之Service
	  	   
关于spfa 判断负环
	  	   
1012. 数字分类 (20)
	  	   
Mac下安装VirtualBox5.1并在VirtualBox中安装CentOS 7.3
	  	   
Levenshtein distance最小编辑距离算法实现
	  	   
在maven本地仓库中添加oracle的jdbc驱动。
	  	   
归并排序最直观的示意图