JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法


Posted in Javascript onDecember 27, 2016

本文实例讲述了JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法。分享给大家供大家参考,具体如下:

这里演示js如何给页面中所有的img对象加上onclick事件,且实现在新窗体中查看该图片文件的功能:

<script type="text/JavaScript" language="javascript">
<!--
     ///给页面中所有img对象添加onclick事件
     //author:aganar
     ///
    function AddImgClickEvent()
    {
      var objs = document.getElementsByTagName("img");
      for(var i=0;i<objs.length;i++)
      {
        objs[i].onclick=function()
        {
          window.open(this.src);
        }
        objs[i].style.cursor = "pointer";
      }
    }
    AddImgClickEvent();
// -->
</script>

效果如下图所示:

JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
Jquery知识点二 jquery下对数组的操作
Jan 15 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
Vue监听一个数组id是否与另一个数组id相同的方法
Sep 26 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 #Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 #Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 #Javascript
jQuery获取选中单选按钮radio的值
Dec 27 #Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 #Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 #Javascript
TypeScript学习之强制类型的转换
Dec 27 #Javascript
You might like
PHP的FTP学习(二)
2006/10/09 PHP
用PHP和ACCESS写聊天室(六)
2006/10/09 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
jQuery处理图片加载失败的常用方法
2015/06/08 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python实现从订阅源下载图片的方法
2015/03/11 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
浅析Python面向对象编程
2020/07/10 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
C#基础面试题
2016/10/17 面试题
中专生的个人自我评价
2013/12/11 职场文书
一名老师的自我评价
2014/02/07 职场文书
中介业务员岗位职责
2014/04/09 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
入股协议书范本
2014/11/01 职场文书
丽江古城导游词
2015/02/03 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
常用的MongoDB查询语句的示例代码
2021/07/25 MongoDB