关于HTML-DOM和DOM-CORE的获取图片src问题

Dear 丶 2023-06-19 09:36 20阅读 0赞

今天写一个关于鼠标点击切换图片显示的小功能上碰壁了！！ 检查好几遍代码都没找到原因，最后使用控制台发现了原因所在，
       下面给大家说一下，希望可以帮大家解决一些问题

//获取class名为 focusImg的元素，切记，获取一个className后面的[0]不能少
    var focusImg = document.getElementsByClassName('focusImg')[0];在这里插入代码片
    //使用HTML-DOM获取focusImg的图片src
    var imgSrc = 'img/1.jpg';
    var changePic = 'img/2.jpg';
    //把imgSrc赋值给fousImg
    focusImg.src = imgSrc;
    //猜猜他们两个是否相等
    console.log(focusImg.src == imgSrc);

![result][]  
很显然结果是false，为什么会这样呢？ 我们检查一下focusImg.src的值是多少

console.log(focusImg.src)

![在这里插入图片描述][20191205145610970.png]  
显示的结果是这一大串，所以造成了我们程序当中出现了百思不得其解的错误。  
让我们看看用DOM-core中的getAttribute()获取的src吧

var source = focusImg.getAttribute('src');
    console.log(source);

![在这里插入图片描述][2019120514590923.png]  
这样获取的就是正确的src地址了，这时候再使用console.log(focusImg.src == imgSrc)得到的结果就是true，大家可以试一下。

这也是在实践中发现错误，提高自己。下面给大家贴上用原生js和jQuery写的鼠标覆盖切换图片吧！

//原生js方法
    window.onload = function (){ 
    				var focusImg = document.getElementsByClassName('focusImg')[0];
    				focusImg.onmouseover = function(){ 
    					var imgSrc = 'img/1.jpg';
    					var source = focusImg.getAttribute('src');
    					console.log(source);
    					var changeSrc = 'img/2.jpg';
    					
    					if(source == imgSrc){ 
    						focusImg.setAttribute('src', changeSrc);
    					}else{ 
    						focusImg.setAttribute('src', imgSrc);
    					}
    				}
    			}
    //使用jquery方法
    			$(function(){ 
    				
    				$('.focusImg').mouseover(function(){ 
    					
    					var imgSrc = 'img/2.jpg';
    					var changeSrc = 'img/1.jpg';
    					var Img = $(this).attr('src');
    					
    					if(Img == changeSrc){ 
    						$(this).attr('src', imgSrc)
    						.next().hide();
    					}else{ 
    						$(this).attr('src', changeSrc)
    						.next().show()
    						.removeClass('changeColor');
    						
    					}
    					
    				});
    			});

希望对大家有帮助吧，谢谢观看！

[result]: https://img-blog.csdnimg.cn/20191205145349124.png
[20191205145610970.png]: https://img-blog.csdnimg.cn/20191205145610970.png
[2019120514590923.png]: https://img-blog.csdnimg.cn/2019120514590923.png