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 验证日期的函数
Mar 18 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
JQuery插件jcarousellite的参数中文说明
May 11 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
在vue中使用vant TreeSelect分类选择组件操作
Nov 02 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
关于js与php互相传值的介绍
2013/06/25 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python简单实现基数排序算法
2015/05/16 Python
好用的Python编辑器WingIDE的使用经验总结
2016/08/31 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
家长给老师的道歉信
2014/01/13 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
「海贼王」112.9万粉丝纪念图标公布
2022/03/21 日漫
零基础学java之循环语句的使用
2022/04/10 Java/Android
ConditionalOnProperty配置swagger不生效问题及解决
2022/06/14 Java/Android