JS操作图片(增,删,改) 例子
<!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>
点击创建相册所呈现页面
点击替换图片，替换指定位置的图片
点击删除节点，删除指定位置的图片的节点
相关文章
使用JavaScript判断用户输入的是否为正整数(两种方法)
在项目开发中，需要使用JavaScript验证用户输入的是否为正整数，下面小编给大家分享两种方法，需要的朋友参考下2017-02-02
最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式
这篇文章主要介绍了最简单的JavaScript验证整数、小数、实数、有效位小数正则表达式,其中包含保留1位小数、保留2位小数、保留3位小数等正则,需要的朋友可以参考下2015-04-04
这篇文章主要为大家详细介绍了js实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了javascript实现数字英文验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了JS扩展类，克隆对象与混合类,通过自定义extend,clone与augment函数实例分析了类的扩展，对象的克隆与混合类相关实现与使用技巧,需要的朋友可以参考下2016-11-11
replace() 方法用于将字符串用一些字符替换另一些字符，如果用正则表达式替换时， regexp 具有全局标志 g，下面有个不错的示例，感兴趣的朋友可以参考下2013-10-10
本文主要讲解了JavaScript闭包和回调,闭包的概念和特性,结合实例分析了使用步骤与方法2017-08-08
这篇文章主要介绍了JS+CSS实现模仿浏览器网页字符查找功能的方法,实例分析了javascript实现查找功能的样式及相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JavaScript中的数值范围介绍,本文是对JavaScript中Number类型的追根究底,读完本文将会对Number类型有一个彻底了解,需要的朋友可以参考下2014-12-12
Three.js是一个3DJavaScript库，基于右手坐标系，可以创建简单或是比较复杂的三维图形并应用丰富多彩的纹理和材质，可以添加五光十色的光源，可以在3D场景中移动物体或是添加脚本动画等等。本文介绍了利用three.js如何画一个3D立体的正方体的方法，需要的可以参考下。2017-11-11
最新评论