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 相关文章推荐
document.execCommand()的用法小结
Jan 08 Javascript
jQuery打印指定区域Html页面并自动分页
Jul 04 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
Angular工具方法学习
Dec 26 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
npm qs模块使用详解
Feb 07 Javascript
js实现简单扫雷
Nov 27 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产生动态的影像图
2006/10/09 PHP
php 结果集的分页实现代码
2009/03/10 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
使用php判断浏览器的类型和语言的函数代码
2013/02/28 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
AngularJS的一些基本样式初窥
2015/07/27 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python实现发送和获取手机短信验证码
2016/01/15 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python生成大写32位uuid代码
2020/03/03 Python
Python实现爬取并分析电商评论
2020/06/19 Python
浅析Python迭代器的高级用法
2020/07/16 Python
python两种注释用法的示例
2020/10/09 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
数字漫画:comiXology
2020/06/13 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
定义一结构体数组表示分数,并求两个分数相加之和
2013/06/11 面试题
2014高中生入党思想汇报范文
2014/09/13 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
教师党员承诺书2015
2015/01/21 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书