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="創(chuàng)建相冊" onclick="chuangjian();" />
<input type="button" value="替換圖片" onclick="tihuan();" />
<input type="button" value="刪除節(jié)點" onclick="shanchu();" />
</body>
</html>
點擊創(chuàng)建相冊所呈現(xiàn)頁面
點擊替換圖片，替換指定位置的圖片
點擊刪除節(jié)點，刪除指定位置的圖片的節(jié)點
相關(guān)文章
使用JavaScript判斷用戶輸入的是否為正整數(shù)(兩種方法)
在項目開發(fā)中，需要使用JavaScript驗證用戶輸入的是否為正整數(shù)，下面小編給大家分享兩種方法，需要的朋友參考下2017-02-02
最簡單的JavaScript驗證整數(shù)、小數(shù)、實數(shù)、有效位小數(shù)正則表達式
這篇文章主要介紹了最簡單的JavaScript驗證整數(shù)、小數(shù)、實數(shù)、有效位小數(shù)正則表達式,其中包含保留1位小數(shù)、保留2位小數(shù)、保留3位小數(shù)等正則,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了js實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
基于javascript實現(xiàn)數(shù)字英文驗證碼
這篇文章主要為大家詳細介紹了javascript實現(xiàn)數(shù)字英文驗證碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JS擴展類，克隆對象與混合類,通過自定義extend,clone與augment函數(shù)實例分析了類的擴展，對象的克隆與混合類相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下2016-11-11
replace() 方法用于將字符串用一些字符替換另一些字符，如果用正則表達式替換時， regexp 具有全局標志 g，下面有個不錯的示例，感興趣的朋友可以參考下2013-10-10
本文主要講解了JavaScript閉包和回調(diào),閉包的概念和特性,結(jié)合實例分析了使用步驟與方法2017-08-08
JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法
這篇文章主要介紹了JS+CSS實現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法,實例分析了javascript實現(xiàn)查找功能的樣式及相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript中的數(shù)值范圍介紹,本文是對JavaScript中Number類型的追根究底,讀完本文將會對Number類型有一個徹底了解,需要的朋友可以參考下2014-12-12
Three.js是一個3DJavaScript庫，基于右手坐標系，可以創(chuàng)建簡單或是比較復(fù)雜的三維圖形并應(yīng)用豐富多彩的紋理和材質(zhì)，可以添加五光十色的光源，可以在3D場景中移動物體或是添加腳本動畫等等。本文介紹了利用three.js如何畫一個3D立體的正方體的方法，需要的可以參考下。2017-11-11