【问题标题】:How can I select an <img> element programmatically using JavaScript?如何使用 JavaScript 以编程方式选择 <img> 元素?
【发布时间】:2010-09-12 14:19:23
【问题描述】:

我在 HTML 文档中有一个&lt;img&gt;,我想突出显示它,就像用户使用鼠标突出显示它一样。有没有办法使用 JavaScript 做到这一点?

我只需要它在 Mozilla 中工作,但欢迎提供任何和所有信息。

编辑:我想要选择图像的原因实际上不是为了让它突出显示,而是为了让我可以使用 XPCOM 将选定的图像复制到剪贴板。所以实际上必须选择 img 才能使其工作。

【问题讨论】:

    标签: javascript html firefox dom


    【解决方案1】:

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

    【讨论】:

      【解决方案2】:

      我个人选择元素的选择是jquery:

      那么获取你选择的元素是:

      $("img#YOURIMAGEHER​​E").focus();

      【讨论】:

        【解决方案3】:

        你到底想做什么?如果您使用的是 XPCOM,那么您可能正在编写一个应用程序或一个扩展程序;不能直接把图片数据拿到剪贴板上吗?

        【讨论】:

        【解决方案4】:

        这是一个选择页面上第一张图片的示例(如果您在 Firebug 中的此页面上对其进行测试,它将是 Stack Overflow 徽标):

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

        相关文档:

        【讨论】:

        【解决方案5】:

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

        另外,我相信如果你把调用改为“highLight(this)”,函数def改为“highLight(obj)”,那么你可以跳过“document.getElementById()”调用(以及指定“img”的“id”属性),只要你改用“obj.style.border”。

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

        【讨论】:

          【解决方案6】:

          可以交换图片的来源,如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>
          

          【讨论】:

          • 谢谢,迈克。我应该更具体地说明我想要做什么。图像不能只是突出显示。它实际上必须突出显示。
          【解决方案7】:

          给 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()" />
          

          编辑:: 您可以尝试使用 .focus 为其提供焦点。

          【讨论】:

            猜你喜欢
            • 2019-06-24
            • 1970-01-01
            • 1970-01-01
            • 2021-01-02
            • 1970-01-01
            • 2012-08-04
            • 2015-12-24
            • 1970-01-01
            相关资源
            最近更新 更多