控制元素的div属性
生活随笔
收集整理的這篇文章主要介紹了
控制元素的div属性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、需求分析
?? 改變元素的寬、高、顏色、顯示、重置等屬性。
2、技術分析
?? 基礎的css、html、js
3、詳細分析
如圖，單擊按鈕，改變元素屬性:
3.1 HTML部分
根據視圖不難發現，內容分兩大不分:按鈕欄和效果圖，所以設置兩個div。
<body><div class="outer"><input type="button" value="變寬" ><input type="button" value="變高" ><input type="button" value="變色" ><input type="button" value="隱形" ><input type="button" value="重置" ></div><div class="content"> </div> </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){//聲明一個函數，包含三個參數(元素，屬性，值)，外部函數1elem.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>
?
? ?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0ijccjb&title=控制元素的div屬性
總結
以上是生活随笔為你收集整理的控制元素的div属性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： td过长，将固定宽度table撑开
- 下一篇： html css基础知识