JavaScript動態設定元素背景圖片
本章節分享一段程式碼例項,它實現了使用javascript動態設定元素背景圖片功能。
關於CSS設定背景圖片更多內容參閱CSS background背景一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #antzone{ width:200px; height:100px; } </style> <script> window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("antzone"); obt.onclick=function(){ odiv.style.backgroundImage="url('mytest/demo/mybg.png')" } } </script> </head> <body > <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了我們的要求,點選按鈕可以動態設定div元素的背景圖片。
相關文章
- JavaScript設定背景圖片JavaScript
- JavaScript設定背景圖片位置JavaScript
- 為view設定背景圖片View
- css設定背景圖片鋪滿固定不動CSS
- html+css 設定背景圖片HTMLCSS
- CSS設定背景圖片程式碼CSS
- vscode設定背景圖片VSCode
- UIView設定背景圖片幾種方式UIView
- 為input文字框設定背景圖片
- CSS3第二天(元素顯示模式、圖片背景設定)CSSS3模式
- JavaScript設定元素float浮動JavaScript
- CSS3 設定多個背景圖片CSSS3
- JavaScript 動態設定colSpanJavaScript
- c# 設定MdiClient窗體的背景圖片C#client
- 設定二維碼圖片背景透明教程
- 設定背景圖片鋪滿整個螢幕
- Android之背景圖片設定為重複Android
- css3動態背景圖片程式碼例項CSSS3
- JavaScript獲取背景圖片定位值JavaScript
- 滑鼠滑過改變元素的背景圖片
- win10 動態圖片桌布怎麼設定_win10怎麼設定動態桌布Win10
- JavaScript動態設定float浮動JavaScript
- css設定背景圖片樣式程式碼例項CSS
- QT中 視窗部件的 背景圖片 的設定QT
- Qt中按鈕背景圖片的切換設定QT
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- CSS設定元素的背景顏色CSS
- jQuery動態設定div元素的尺寸jQuery
- 給一個塊元素新增多張背景圖片
- CSS設定背景圖片水平重複和垂直重複CSS
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- JavaScript動態新增li元素JavaScript
- JavaScript動態生成html元素JavaScriptHTML
- vue圖片插入與設定夜間模式/動態過渡Vue模式
- 使用javascript設定圖片的透明度JavaScript
- JavaScript動態建立元素和追加元素JavaScript
- 2個方式快速解決:Word背景圖片怎麼設定
- 直播平臺原始碼,qt繪畫事件-設定背景圖片原始碼QT事件