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读取RSS数据
Jan 20 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
jQuery构造函数init参数分析续
May 13 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
Vue的双向数据绑定实现原理解析
Feb 17 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 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+JS实现搜索自动提示(实例)
2013/06/09 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
JavaScript经典效果集锦
2010/07/06 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
github配置使用指南
2014/11/18 Python
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
职工代表大会主持词
2014/04/01 职场文书
青年志愿者活动总结
2014/04/26 职场文书
节能宣传周活动总结
2014/05/08 职场文书
拔河比赛口号
2014/06/10 职场文书
考试作弊检讨书
2014/10/21 职场文书
教你如何让spark sql写mysql的时候支持update操作
2022/02/15 MySQL
介绍一下28个JS常用数组方法
2022/05/06 Javascript