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 相关文章推荐
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
Nov 21 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
Aug 09 Javascript
javascript屏蔽右键代码
May 15 Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 Javascript
JavaScript实现网页对象拖放功能的方法
Apr 15 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
Vue 实现双向绑定的四种方法
Mar 16 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
JS控制GIF图片的停止与显示
Oct 24 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高手?学会“懒惰”的编程
2006/12/05 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
各式各样的导航条效果css3结合jquery代码实现
2016/09/17 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
javascript实现QQ空间相册展示源码
2017/12/12 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
python实现web方式logview的方法
2015/08/10 Python
python编写Logistic逻辑回归
2020/12/30 Python
django2 快速安装指南分享
2018/01/05 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
外企求职信范文分享
2013/12/31 职场文书
售后服务承诺书范文
2014/03/26 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL