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 模式实例 观察者模式
Oct 24 Javascript
js 格式化时间日期函数小结
Mar 20 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
Nov 04 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
May 30 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JS事件循环机制event loop宏任务微任务原理解析
Aug 04 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
基于mysql的bbs设计(三)
2006/10/09 PHP
文件上传程序的全部源码
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP中串行化用法示例
2016/11/16 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery.ui.progressbar 中文文档
2009/11/26 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
node.js基础知识汇总
2020/08/25 Javascript
Python Web框架Flask下网站开发入门实例
2015/02/08 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
Python实现翻转数组功能示例
2018/01/12 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
css3 transform属性详解
2014/09/30 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
全球在线商店:BerryLook
2019/04/14 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
学习十八大精神心得体会
2013/12/31 职场文书
大学新生军训感言
2014/02/25 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
2014年教学工作总结
2014/11/13 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL