通过javascript操作图像，非常简单

Manipulating images via javascript, very simple

本文关键字：非常 简单 图像 javascript 操作 通过      更新时间：2023-09-26

edit:

非常感谢你。有一个伟大的夜晚/白天

我所要做的就是让javascript通过检查单元格的id来更改表单元格中的图像src。

我已经研究了关于堆栈溢出的每一个相关问题及其解决方案。由于某种原因，我的代码无法工作。最可能的语法/睡眠不足问题

这个js脚本在一个表中，位于src的正上方，我正试图根据情况进行更改：

<script>
function getImage(){  
return "http://i.imgur.com/s5WKBjy.png"; //i literally just want to see if this works and it isn't
}  
document.onload = function(){  
    document.getElementById('homeimage').src = getImage();  
};  
</script>  
  <td colspan="3"><img style="width:110px;height:128px;" id = "homeimage" onload="getImage()"></td>   

 <td colspan = "3"><img style="width:150px;height:128px;" id = "homeimage"></td>

以上两项都不起作用。带onload="getImage（）"，不带。我是在装聋作哑吗？肯定有一些明显的东西我错过了。

如果你不想使用任何ID，你可以使用这个方法，此代码适用于表中的n个td。。。。

window.onload = function()
{  
    
    var rows = document.getElementsByTagName("table")[0].rows;
    tds = rows[0].getElementsByTagName("td");
    for (var n=0; n<tds.length;n++)
    {
        tds[n].getElementsByTagName('img')[0].src = getImage();
    }
}
function getImage(){ 
 return "http://i.imgur.com/s5WKBjy.png";
}  
<table>
  <tr>
     <td colspan="3"><img style="width:110px;height:128px;"></td>   
     <td colspan = "3"><img style="width:150px;height:128px;"></td>
  </tr>  
</table>

不能有两个具有相同id的图像。例如，命名一个homeimage1和另一个homeimage2。

我们不能在一个网页中多次使用相同的id。使用不同的id。第二次将doucment.onload更改为window.onload

function getImage(){  
 return "http://i.imgur.com/s5WKBjy.png";
}  
window.onload = function(){  
    document.getElementById('homeimageA').src = getImage();
    document.getElementById('homeimageB').src = getImage();
}
  <td colspan="3"><img style="width:110px;height:128px;" id = "homeimageA" onload="getImage()"></td>   
 <td colspan = "3"><img style="width:150px;height:128px;" id = "homeimageB"></td>

需要注意的事项：

  1. 您有重复的ID，其中ID
    2. 是应该是唯一的
  2. 您应该使用encodeURIComponent()来返回url值
  3. 您不必在图像本身上使用onload
  4. 您应该将onload事件绑定到窗口对象上，这样就可以了
  5. 在设置src之前，只需decodeURIComponent()返回值
<td colspan="3"><img style="width:110px;height:128px;" id="homeimage1"></td>   
<td colspan = "3"><img style="width:150px;height:128px;" id="homeimage2"></td>

现在js:中的更改

<script>
   function getImage(){  
      return encodeURIComponent("http://i.imgur.com/s5WKBjy.png"); //i literally just want to see if this works and it isn't
   }  
   window.onload = function(){  
       document.getElementById('homeimage').src = decodeURIComponent(getImage());  
   };  
</script>
相关文章：