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 js cookie的存储,获取和删除
Dec 29 Javascript
jQuery拖动图片删除示例
May 10 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
原生js实现回复评论功能
Jan 18 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
Vue分页组件实例代码
Apr 17 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
综合图片计数器
2006/10/09 PHP
php ftp文件上传函数(基础版)
2010/06/03 PHP
关于JSON以及JSON在PHP中的应用技巧
2013/11/27 PHP
php中文字符串截取方法实例总结
2014/09/30 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
jQuery 1.8 Release版本发布了
2012/08/14 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
使用yeoman构建angular应用的方法
2017/08/14 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
centos 上快速搭建ghost博客方法分享
2018/05/23 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python中def是做什么的
2020/06/10 Python
python如何从键盘获取输入实例
2020/06/18 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
担保书范文
2015/01/20 职场文书
社区党务工作总结2015
2015/05/19 职场文书
聘任通知书
2015/09/21 职场文书
《花钟》教学反思
2016/02/17 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis