JS操作图片(增,删,改) 例子


Posted in Javascript onApril 17, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    Image
    {
        width:100px;
        height:100px;
        }
    </style>
    <script type="text/javascript">
        function chuangjian() { 
        //添加图片
            var array = ['1.jpg',
            '2.jpg',
            '3.jpg',
            '4.jpg',
            '5.jpg',
            '6.jpg',
            '7.jpg',
            '8.jpg',
            '9.jpg',
            '10.jpg',
            '11.jpg',
            '12.jpg',
            '13.jpg',
            '14.jpg',
            '15.jpg'
            ];
            //alert(array.length);
            var tablenode = document.createElement('table');
            var tbody = document.createElement('tbody');
            tablenode.setAttribute('width', '600px');
            tablenode.setAttribute('height', '400px');
            tablenode.setAttribute('border', '2px');
            var count = 0;
            for (var i = 0; i < 3; i++) {
                var trnode = document.createElement('tr');
                for (var j = 0; j < 5; j++) {
                    var tdnode = document.createElement('td');
                    var imgnode = document.createElement('img');
                    imgnode.setAttribute('src', 'picture/' + array[count]);
                    tdnode.appendChild(imgnode);
                    trnode.appendChild(tdnode);
                    count++;
                }
                tbody.appendChild(trnode);
            }
            tablenode.appendChild(tbody);
            document.body.appendChild(tablenode);
        }
        //    1.将第2行第4列的图片替换成你自己的图片,不要使用setAttribute
        function tihuan() {
            var pnode = document.createElement('img');
            pnode.setAttribute('src', 'images/2.jpg');
            var oldnode = document.getElementsByTagName('img')[8];
            oldnode.parentNode.replaceChild(pnode, oldnode);
            var oldnode = document.createElement('img');
        }
        //    2.删除第3行第2列的图片
        function shanchu() {
            var oldnode = document.getElementsByTagName('img')[11];
            oldnode.parentNode.removeChild(oldnode)
        }
    </script>
</head>
<body>
<input type="button" value="创建相册" onclick="chuangjian();" />
<input type="button" value="替换图片" onclick="tihuan();" />
<input type="button" value="删除节点" onclick="shanchu();" />
</body>
</html>

点击创建相册所呈现页面

JS操作图片(增,删,改) 例子

点击替换图片,替换指定位置的图片

 

JS操作图片(增,删,改) 例子

点击删除节点,删除指定位置的图片的节点

JS操作图片(增,删,改) 例子

Javascript 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JS定时器实例
Apr 17 #Javascript
JS中showModalDialog 的使用解析
Apr 17 #Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 #Javascript
中文字符串截取的js函数代码
Apr 17 #Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 #Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 #Javascript
js读写(删除)Cookie实例详解
Apr 17 #Javascript
You might like
php框架Phpbean说明
2008/01/10 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP开发的微信现金红包功能示例
2017/06/29 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
Javascript的闭包
2009/12/31 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python实现堆排序的方法详解
2016/05/03 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
Python 专题四 文件基础知识
2017/03/20 Python
Python 自动化表单提交实例代码
2017/06/08 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python获取Pandas列名的几种方法
2019/08/07 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
我的长生果教学反思
2014/04/28 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
社区护士演讲稿
2014/08/27 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python
mysql 索引合并的使用
2021/08/30 MySQL