這篇文章主要介紹如何控制元素中div屬性，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
如何控制元素中div屬性
1、需求分析
改變元素的寬、高、顏色、顯示、重置等屬性。
2、技術分析
基礎的css、html、js
3、詳細分析
如圖，單擊按鈕，改變元素屬性:
3.1 HTML部分
根據視圖不難發現，內容分兩大不分:按鈕欄和效果圖，所以設置兩個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">
/*頁面格式化，清除瀏覽器默認編劇(瀏覽器預留給滾動條邊距)*/
*{
padding: 0;
margin: 0;
}
/*設置元素寬度，元素居中，文本居中*/
.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){//聲明一個函數，包含三個參數(元素，屬性，值)，外部函數1 elem.style[attr]=value//三個參數之間的函數關系，元素的樣式屬性的集合等于值(點操作符:對象，方括號操作符:對象，數組)
};
window.onload=function(){//文檔加載完成時，調用函數
/*聲明四大變量：按鈕，元素，屬性，值*/
var btn=document.getElementsByTagName("input");//按鈕變量來自標簽
var ctt=document.getElementClssName("content");//元素變量來自類名
var att=["width","height","background","display","display"];//屬性名數組集合
var val=["200px","200px","red","none","block"];//屬性值數組集合，屬性值與屬性名一一對應
for(var i=0;i<btn.length;i++){ btn[i].index=i;//數組btn中元素的索引值=i,給按鈕數組中的每個元素編號
btn[i].onclick=function(){//給數組中的元素添加點擊事件，點擊第i個按鈕，調用函數
changeStyle(ctt,att[this.index],val[this.index])//結合外部函數1，形成閉包，ctt為元素，this.index為按鈕數組中元素的索引值，即i;屬性att數組的第（this.index=i）個元素，屬性值數組val的第（this.index=i）個元素值。
this.index==btn.length-1&&(ctt.style.cssText=" ");//可寫成:if(this.index==btn.length-1){ctt.style.cssText=""},點擊第四個按鈕，清空css樣式(cssText()適用塊元素)
}
}
}
</script>以上是“如何控制元素中div屬性”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
