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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
picChange 图片切换特效的函数代码
May 06 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
javascript iframe跨域详解
Oct 26 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Vue动态获取width的方法
Aug 22 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 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
DOMXML函数笔记
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
php实现文件下载实例分享
2014/06/02 PHP
jQuery中empty()方法用法实例
2015/01/16 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
解决vue接口数据赋值给data没有反应的问题
2018/08/27 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
深入理解Python变量与常量
2016/06/02 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
设置python3为默认python的方法
2018/10/31 Python
Python中函数参数匹配模型详解
2019/06/09 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
使用pycharm和pylint检查python代码规范操作
2020/06/09 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
质检部部长职责
2013/12/16 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
教师创先争优承诺书
2015/04/27 职场文书
《叶问2》观后感
2015/06/15 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
pytorch fine-tune 预训练的模型操作
2021/06/03 Python
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Node与Python 双向通信的实现代码
2021/07/16 Javascript
使用MybatisPlus打印sql语句
2022/04/22 SQL Server