如何使用JavaScript以编程方式选择<img>元素?

下面是一个选择页面上第一个图像的示例(如果你在Firebug中在这个页面上测试它,它将是Stack Overflow徽标):

var s = window.getSelection()
var r = document.createRange();
r.selectNode(document.images[0]);
s.addRange(r)

相关文件:

• http://developer.mozilla.org/en/DOM/window.getSelection
• http://developer.mozilla.org/en/DOM/range.selectNode
• http://developer.mozilla.org/en/DOM/Selection/addRange

您可能还想在s.addRange(r)之前调用s.removeAllRanges()。

你到底想做什么?如果您正在使用XPCOM,那么您可能正在为其编写应用程序或扩展;你不能直接获取图像数据并将其放在剪贴板上吗?

我个人选择jquery来选择元素:

然后,要获得您选择的元素,请执行以下操作:

$(“img#YOURIMAGEHERE”).focus();

您可以交换图像的来源,如img.src=“otherimage.png”;

实际上,我曾经这样做过,你可以做一些事情来预加载图像。

我甚至在图像元素上设置了特殊的属性,例如swap-image=“otherimage.png”,然后搜索任何有它的元素,并设置处理程序来自动交换图像。…你可以做一些有趣的事情。

对不起,我误解了这个问题!但不管怎样,对于那些有兴趣做我所说的事情的人来说,这里有一个例子来说明我的意思(粗略的实现,我建议使用jQuery等框架来改进它,但只是为了让你继续下去):

<html>
<body>
<script language="javascript">
function swap(name) {
  document.getElementById("image").src = name;
}
</script>
<img id="image" src="test1.png"
     onmouseover="javascript:swap('test0.png');"
     onmouseout="javascript:swap('test1.png');">
</body>
</html>

“highLight”解决方案的基本思想是可以的,但您可能希望为img设置一个“静态”边框样式(在css中定义),其尺寸与highLight方法中指定的尺寸相同,这样就不会导致大小调整。

此外,我相信,如果你将调用更改为“highLight(this)”,将函数def更改为“high Light(obj)”,那么你可以跳过“document.getElementById()”调用(以及“img”的“id”属性的规范),只要你改为“obj.style.bield”。

你可能还需要正确拼写“highLight”。

给img标记一个ID。使用document.getElementById('ID')。

<script type="text/javascript" language="javascript">
function highLight()
{
  var img = document.getElementById('myImage');
  img.style.border = "inset 2px black";
}
</script>
<img src="whatever.gif" id="myImage" onclick="hightLight()" />

编辑:: 你可以试着集中注意力。