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.write()
Apr 15 Javascript
如何实现动态删除javascript函数
May 27 Javascript
javascript 节点排序 2
Jan 31 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
理解javascript中的严格模式
Feb 01 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
electron中使用bootstrap的示例代码
Nov 06 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php实现MySQL数据库备份与还原类实例
2014/12/09 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript document.images实例
2008/05/27 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
如何选择适合你的JavaScript框架
2017/11/20 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python生成器推导式用法简单示例
2019/10/08 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
口才训练演讲稿范文
2014/09/16 职场文书
2015年党员个人工作总结
2015/05/13 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
迎新年主持词
2015/07/06 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
比较几种Redis集群方案
2021/06/21 Redis