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 打地鼠游戏代码说明
Oct 12 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
node.js中的fs.unlinkSync方法使用说明
Dec 15 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 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
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
举例讲解jQuery中可见性过滤选择器的使用
2016/04/18 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
Angular在模板驱动表单中自定义校验器的方法
2017/08/09 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
python实现下载文件的三种方法
2017/02/09 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
银行员工考核评语
2014/12/31 职场文书
阳光体育运动标语口号
2015/12/26 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server