js動態設定元素透明度程式碼例項
本章節分享一段程式碼例項,它實現了動態設定元素透明度效果。
當然這個動態設定不是指的以動畫方式設定透明度。
以動畫方式設定透明度可以參閱javascript實現的以漸變方式設定透明度一章節。
程式碼例項如下:
[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; background:#ccc; } </style> <script> function setOpacity(elem, level) { if(elem.filters){ elem.style.filters = 'alpha(opacity=' + level + ')'; } else { elem.style.opacity = level / 100; } } window.onload=function(){ var odiv=document.getElementById("antzone"); var obt=document.getElementById("bt"); obt.onclick=function(){ setOpacity(odiv,50); } } </script> </head> <body> <div id="antzone"></div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
相關文章
- javascript實現的動態設定元素透明度程式碼例項JavaScript
- js動態設定元素css樣式程式碼例項JSCSS
- opacity設定元素透明度程式碼例項
- jquery動態設定元素的尺寸程式碼例項jQuery
- js動態連結<a>元素程式碼例項JS
- js動態建立HTML元素程式碼例項JSHTML
- jquery動態設定為元素樣式程式碼例項jQuery
- javascript相容所有瀏覽器設定元素透明度程式碼例項JavaScript瀏覽器
- javascript動態設定元素的樣式簡單程式碼例項JavaScript
- javascript動態建立元素程式碼例項JavaScript
- jquery動態新增li元素程式碼例項jQuery
- SVG設定邊框的透明度程式碼例項SVG
- js元素上下移動效果程式碼例項JS
- js元素的震動效果程式碼例項JS
- javascript元素透明度漸變效果程式碼例項JavaScript
- javascript動態設定字型的大小程式碼例項JavaScript
- js實現的元素運動程式碼例項JS
- 設定div元素漸隱效果程式碼例項
- js動態建立文字框程式碼例項JS
- js設定元素控制元件顯示和隱藏程式碼例項JS控制元件
- js實現的元素抖動效果程式碼例項JS
- CSS設定元素邊框樣式例項程式碼CSS
- 動態的新增或者刪除指定元素程式碼例項
- html元素的動態新增和刪除程式碼例項HTML
- js元素挨個掉落程式碼例項JS
- js刪除li元素程式碼例項JS
- angularJS操作input元素程式碼例項AngularJS
- js陣列元素排序程式碼例項JS陣列排序
- js動態修改元素中的內容程式碼例項簡單介紹JS
- js通過拖動調整元素位置程式碼例項JS
- javascript動態改變iframe元素src屬性程式碼例項JavaScript
- javascript元素水平運動程式碼例項JavaScript
- jQuerydiv元素拖動效果程式碼例項jQuery
- js給函式設定預設值程式碼例項JS函式
- jquery設定表單元素為不可用程式碼例項jQuery
- jQuery動畫方式設定div元素長和寬程式碼例項jQuery動畫
- JavaScript設定元素透明度JavaScript
- 動態載入js或者css檔案程式碼例項JSCSS