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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
js 异步处理进度条
Apr 01 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
重置Redux的状态数据的方法实现
Nov 18 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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防止注入攻击实例分析
2014/11/03 PHP
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
JavaScript实现的搜索及高亮显示功能示例
2017/08/14 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Puppeteer使用示例详解
2019/06/20 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
校长先进事迹材料
2014/02/01 职场文书
创先争优个人承诺书
2014/08/30 职场文书
2014年业务工作总结
2014/11/17 职场文书
班主任高考寄语
2015/02/26 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS