首頁 > 網際網路

如何動態給div標籤指定一張圖片

2019-12-12 02:11:43

動態給div標籤指定一張圖片,使用jquery是比較方便的,本文介紹兩種方式:

1)設定div的背景圖

2)div內部插入一個圖片標籤

1

開啟visual studio code,新建如下結構的檔案,在vs code中的html頁面輸入一個感嘆號,再按一下Tab鍵,就可以快速建立H5格式的頁面DOM結構


2

在頁面上新增一個div,設定高=300px,寬=300px。再新增兩個按鈕,用於後面演示點選按鈕時給div新增圖片


3

在頁面head部分,引入jquery原始碼,要使用jquery是必須要引入其原始檔的


4

在頁面新增Jquery程式碼,係結【新增背景圖】按鈕的點選事件,動態給div新增背景圖


5

在瀏覽器中開啟頁面,點選【新增背景圖】,就可以看到圖片的效果


6

在頁面新增Jquery程式碼,係結【新增img標籤】按鈕的點選事件,動態給div插入一個img標籤,顯示圖片


7

在瀏覽器中執行,效果如下



IT145.com E-mail:sddin#qq.com