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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
详解js界面跳转与值传递
Nov 22 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
AngularJS折叠菜单实现方法示例
May 18 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
vue-router为激活的路由设置样式操作
Jul 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php采集神器cURL使用方法详解
2016/02/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
图片之间的切换
2006/06/26 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
javascript回调函数的概念理解与用法分析
2017/05/27 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
python编写俄罗斯方块
2020/03/13 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
python 元组和列表的区别
2020/12/30 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
在购买印度民族服饰:Soch
2020/09/15 全球购物
行政助理岗位职责范文
2013/12/03 职场文书
2016五四青年节活动总结范文
2016/04/06 职场文书