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 相关文章推荐
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
红米手机抢购的js代码
Mar 10 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JavaScript仿聊天室聊天记录
Dec 27 Javascript
javascript简单链式调用案例分析
May 10 Javascript
vue-loader教程介绍
Jun 14 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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语法(4)
2006/10/09 PHP
PHP 输出缓存详解
2009/06/20 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
处理文本部分内容的TextRange对象应用实例
2014/07/29 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
2016/07/25 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
ElementUI Tag组件实现多标签生成的方法示例
2019/07/08 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Python多线程学习资料
2012/12/19 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Django 路由控制的实现
2019/07/17 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
纪检监察建议书
2014/05/19 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
工作简历自我评价
2015/03/11 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Java实现简单小画板
2022/06/10 Java/Android