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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
使用控制台破解百小度一个月只准改一次名字
Aug 13 Javascript
AngularJS入门教程之Helloworld示例
Dec 25 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHPlet在Windows下的安装
2006/10/09 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
js的with语句使用方法
2007/09/21 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
2013/12/04 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
Vue组件中prop属性使用说明实例代码详解
2018/05/31 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
2020/05/28 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
浅谈Python中copy()方法的使用
2015/05/21 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
《三袋麦子》教学反思
2014/03/02 职场文书
国庆阅兵观后感
2015/06/15 职场文书
公司考勤管理制度
2015/08/04 职场文书
Nginx安装配置详解
2022/06/25 Servers