明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習分享的學(xué)習平臺！

對于控制元素中div屬性的使用方法

發(fā)表時間：2023-09-07 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章分享給大家的內(nèi)容是關(guān)于控制元素中div屬性的使用方法，內(nèi)容很詳細，接下來我們就來看看具體的內(nèi)容，希望可以幫助到大家。1、需求分析 改變元素的寬、高、顏色、顯示、重置等屬性。2、技術(shù)分析 基礎(chǔ)的css、html、js3、詳細分析如圖，單擊按鈕，改變元素屬性:3.1 HTML部分根據(jù)視...
本篇文章分享給大家的內(nèi)容是關(guān)于控制元素中div屬性的使用方法，內(nèi)容很詳細，接下來我們就來看看具體的內(nèi)容，希望可以幫助到大家。

1、需求分析

改變元素的寬、高、顏色、顯示、重置等屬性。

2、技術(shù)分析

基礎(chǔ)的css、html、js

3、詳細分析

如圖，單擊按鈕，改變元素屬性:

關(guān)于控制元素中div屬性的使用方法

3.1 HTML部分

根據(jù)視圖不難發(fā)現(xiàn)，內(nèi)容分兩大不分:按鈕欄和效果圖，所以設(shè)置兩個p。

<body>
	<p class="outer">
		<input type="button" value="變寬" >
		<input type="button" value="變高" >
		<input type="button" value="變色" >
		<input type="button" value="隱形" >
		<input type="button" value="重置" >
	</p>
	<p class="content">	
	</p>	
</body>

3.2 CSS部分

<style type="text/css"> 
/*頁面格式化，清除瀏覽器默認編劇(瀏覽器預(yù)留給滾動條邊距)*/ 
      *{
         padding: 0;
         margin: 0;
        }
/*設(shè)置元素寬度，元素居中，文本居中*/
      .outer{
	 width: 500px;
	 argin: 0 auto;
	 text-align: center;
	}
/*元素樣式*/
      .content{
	 width: 100px;
	 height: 100px;
	 background: black;
	 margin: 10px auto;
	}
</style>

3.3 JS部分　

<script type="text/javascript">
		var changeStyle=function(elem,attr,value){//聲明一個函數(shù)，包含三個參數(shù)(元素，屬性，值)，外部函數(shù)1			elem.style[attr]=value//三個參數(shù)之間的函數(shù)關(guān)系，元素的樣式屬性的集合等于值(點操作符:對象，方括號操作符:對象，數(shù)組)
		};
		window.onload=function(){//文檔加載完成時，調(diào)用函數(shù)
			/*聲明四大變量：按鈕，元素，屬性，值*/
			var btn=document.getElementsByTagName("input");//按鈕變量來自標簽
			var ctt=document.getElementClssName("content");//元素變量來自類名
			var att=["width","height","background","display","display"];//屬性名數(shù)組集合
			var val=["200px","200px","red","none","block"];//屬性值數(shù)組集合，屬性值與屬性名一一對應(yīng)
		for(var i=0;i<btn.length;i++){			btn[i].index=i;//數(shù)組btn中元素的索引值=i,給按鈕數(shù)組中的每個元素編號
			btn[i].onclick=function(){//給數(shù)組中的元素添加點擊事件，點擊第i個按鈕，調(diào)用函數(shù)				
			       changeStyle(ctt,att[this.index],val[this.index])//結(jié)合外部函數(shù)1，形成閉包，ctt為元素，this.index為按鈕數(shù)組中元素的索引值，即i;屬性att數(shù)組的第（this.index=i）個元素，屬性值數(shù)組val的第（this.index=i）個元素值。
			       this.index==btn.length-1&&(ctt.style.cssText=" ");//可寫成:if(this.index==btn.length-1){ctt.style.cssText=""},點擊第四個按鈕，清空css樣式(cssText()適用塊元素)
		    }
	    }
	}
</script>

相關(guān)推薦：

HTML結(jié)構(gòu)元素是什么？HTML中各種結(jié)構(gòu)元素的總結(jié)（純文本）

如何動態(tài)生成html元素以及為元素追加屬性的方法介紹（附代碼）

以上就是關(guān)于控制元素中div屬性的使用方法的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。