JavaScript動態(tài)改變div屬性的實現(xiàn)方法
更新時間：2015年07月22日 12:37:42 作者：不吃皮蛋
這篇文章主要介紹了JavaScript動態(tài)改變div屬性的實現(xiàn)方法,涉及javascript操作頁面div元素屬性的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JavaScript動態(tài)改變div屬性的實現(xiàn)方法。分享給大家供大家參考。具體如下：
這里可以通過JS動態(tài)改變div屬性，樣式等
<script type="text/javascript">
var oBox = document.getElementById('box');
var oDiv = document.getElementById('div1');
var aInput = document.getElementsByTagName('input');
var aAttr = ['width', 'height', 'backgroundColor', 'display', 'display'];
var aValue = ['200px', '200px', 'red', 'none', 'block'];
for(var len=aInput.length,i=0;i<len;i++){
aInput[i].index = i; //索引
aInput[i].onclick = function(){
//重置按鈕,cssText清空DIV屬性
if(this.index == aInput.length - 1)oDiv.style.cssText = "";
//設置DIV屬性
property(oDiv, aAttr[this.index], aValue[this.index]);
};
}
//控制DIV屬性
function property(obj, attr, value){
obj.style[attr] = value;
}
</script>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這篇文章主要介紹了ES6中new Function()語法及應用,結合實例形式分析了ES6中new Function()的基本語法、功能、原理、閉包等相關使用技巧,需要的朋友可以參考下2020-02-02
js為快捷鍵綁定事件，當按這個快捷鍵時就會觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實現(xiàn)代碼2014-09-09
VS2008中使用JavaScript調(diào)用WebServices
這篇文章主要介紹了VS2008中使用JavaScript調(diào)用WebServices,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)數(shù)碼表特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript 瀏覽器對象模型BOM原理與常見用法實例分析
這篇文章主要介紹了JavaScript 瀏覽器對象模型BOM原理與常見用法,結合實例形式詳細分析了JavaScript瀏覽器對象模型BOM基本概念、原理、使用方法及操作注意事項,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了谷歌瀏覽器調(diào)試JavaScript小技巧,需要的朋友可以參考下2014-12-12
手風琴效果的導航想必大家都有見到過吧，實現(xiàn)的方法也有很多，在本文為大家介紹下使用原生js簡單實現(xiàn)下，感興趣的朋友不要錯過2013-11-11
js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法
這篇文章主要介紹了js樹插件zTree獲取所有選中節(jié)點數(shù)據(jù)的方法,是對js樹插件zTree非常實用的操作,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了不同編碼的頁面表單數(shù)據(jù)亂碼問題解決方法,本文使用一個表單不常用屬性accept-charset解決了這個問題,需要的朋友可以參考下2015-02-02
javaScript 數(shù)值型和字符串型之間的轉換2009-07-07