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引用对象的方法
Jan 11 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
Feb 22 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
详解Vue中状态管理Vuex
May 11 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
小程序从手动埋点到自动埋点的实现方法
Jan 24 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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函数,php爱好者站推荐
2007/03/19 PHP
php zip文件解压类代码
2009/12/02 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
表单提交验证类
2006/07/14 Javascript
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
JavaScript 全角转半角部分
2009/10/28 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
python列表去重的二种方法
2014/02/14 Python
Python操作串口的方法
2015/06/17 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
用Python实现职工信息管理系统
2020/12/30 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
深圳茁壮笔试题
2015/05/28 面试题
竞选村长演讲稿
2014/04/28 职场文书
团代会宣传工作方案
2014/05/08 职场文书
专科生就业求职信
2014/06/22 职场文书
写得不错的求职信范文
2014/07/11 职场文书
房产公证委托书范本
2014/09/20 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript