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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
jquery实现网页定位导航
Aug 23 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
vue使用canvas实现移动端手写签名
Sep 22 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
Javascript设计模式之原型模式详细
Oct 05 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
js 匿名调用实现代码
2009/06/19 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
《四季》教学反思
2014/04/08 职场文书
绘画专业自荐信
2014/07/04 职场文书
端午节寄语2015
2015/03/23 职场文书
承诺书应该怎么写?
2019/09/10 职场文书