JS操作圖片(增,刪,改) 例子

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS操作圖片(增,刪,改) 例子

JS操作圖片(增,刪,改) 例子

編輯：關於JavaScript

復制代碼代碼如下:
<!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>

//添加圖片

            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

日期選擇輸入js控件: 點擊這裡查看效果http:///keleyi/phtml/jstexiao/10.htm點擊文本框自
鼠標移動到圖片名上,顯示圖片的簡單實例: 做法：新建 a.html 和一個待顯示圖片 wait.gif 放在同一目錄下，a.ht
js中eval詳解: eval函數接收一個參數s，如果s不是字符串，則直接返回s。否則執行s語句。如果s語句執行結果是一個

JavaScript基礎知識 JSON基礎正則表達式關於JavaScript JavaScript技巧 jQuery入門知識 AJAX入門 JavaScript綜合知識

DIV CSS 佈局教程網

相關文章