我正在尝试使用代码比较独立于URL的相对路径的图像路径，但是.pathName不起作用
<html>
<head>
<title>change images</title>
<script>
var img=document.getElementById('img').src;
function change(){
if(img.pathname='img1.png'){
var next='img2.png';
document.getElementById('btn').innerHTML='img2.png';
}else if(img.pathname='img2.png'){
var next='img1.png';
document.getElementById('btn').innerHTML='img1.png';
}else{
document.getElementById('btn').innerHTML='error';
}
document.getElementById('img').src=next;
}
</script>
</head>
<body>
<img id='img' src="img1.png">
<button id='btn' onclick="change()">change</button>
</body>
<html>
在控制台上说：''img不是对象
我试图寻找img.pathname返回的内容，然后返回undefined
路径名不是图像元素的属性。从查看您的代码，很明显，您只需要图像的文件名而没有路径。这将为您做到这一点...
function change() {
// get everything after the last / in the image src attribute
var current = document.getElementById('img').src.split("/").slice(-1);
if (current == 'img1.png') {
var next = 'img2.png';
document.getElementById('btn').innerHTML = 'img2.png';
}
else if (current == 'img2.png') {
var next = 'img1.png';
document.getElementById('btn').innerHTML = 'img1.png';
}
else {
document.getElementById('btn').innerHTML = 'error';
}
document.getElementById('img').src = next;
}
它将/实例的映像SRC属性分配到数组中，然后slice以特定的索引将其剪切，在这种情况下为最后一个元素，所以这就是您所获得的。
还要在比较值时注意==的使用。如果有...
if (current = "something)
然后，它实际上将电流设置为值"某物"(由于单个=(和IF语句以true的评估。
我使用indexOf()找到了另一种解决方案，以搜索.src字符串中的图像名称。
<script>
function change(){
var img=document.getElementById('img').src;
if (img.indexOf('img1.png')!= -1){
var next='img2.png';
} else if (img.indexOf('img2.png')!= -1) {
var next='img1.png';
} else {
document.getElementById('btn').innerHTML='else';
}
document.getElementById('img').src=next;
document.getElementById('btn').innerHTML=next;
}
</script>