控制元素的div属性
生活随笔
收集整理的這篇文章主要介紹了
控制元素的div属性
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
1、需求分析
?? 改變?cè)氐膶挕⒏摺㈩伾@示、重置等屬性。
2、技術(shù)分析
?? 基礎(chǔ)的css、html、js
3、詳細(xì)分析
如圖，單擊按鈕，改變?cè)貙傩?
3.1 HTML部分
根據(jù)視圖不難發(fā)現(xiàn)，內(nèi)容分兩大不分:按鈕欄和效果圖，所以設(shè)置兩個(gè)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">/*頁(yè)面格式化，清除瀏覽器默認(rèn)編劇(瀏覽器預(yù)留給滾動(dòng)條邊距)*/ *{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){//聲明一個(gè)函數(shù)，包含三個(gè)參數(shù)(元素，屬性，值)，外部函數(shù)1elem.style[attr]=value//三個(gè)參數(shù)之間的函數(shù)關(guān)系，元素的樣式屬性的集合等于值(點(diǎn)操作符:對(duì)象，方括號(hào)操作符:對(duì)象，數(shù)組)};window.onload=function(){//文檔加載完成時(shí)，調(diào)用函數(shù)/*聲明四大變量：按鈕，元素，屬性，值*/var btn=document.getElementsByTagName("input");//按鈕變量來自標(biāo)簽var ctt=document.getElementClssName("content");//元素變量來自類名var att=["width","height","background","display","display"];//屬性名數(shù)組集合var val=["200px","200px","red","none","block"];//屬性值數(shù)組集合，屬性值與屬性名一一對(duì)應(yīng)for(var i=0;i<btn.length;i ){btn[i].index=i;//數(shù)組btn中元素的索引值=i,給按鈕數(shù)組中的每個(gè)元素編號(hào)btn[i].onclick=function(){//給數(shù)組中的元素添加點(diǎn)擊事件，點(diǎn)擊第i個(gè)按鈕，調(diào)用函數(shù) changeStyle(ctt,att[this.index],val[this.index])//結(jié)合外部函數(shù)1，形成閉包，ctt為元素，this.index為按鈕數(shù)組中元素的索引值，即i;屬性att數(shù)組的第（this.index=i）個(gè)元素，屬性值數(shù)組val的第（this.index=i）個(gè)元素值。this.index==btn.length-1&&(ctt.style.cssText=" ");//可寫成:if(this.index==btn.length-1){ctt.style.cssText=""},點(diǎn)擊第四個(gè)按鈕，清空css樣式(cssText()適用塊元素)}}} </script>
?
? ?
本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0ijccjb&title=控制元素的div屬性
總結(jié)
以上是生活随笔為你收集整理的控制元素的div属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： td过长，将固定宽度table撑开
- 下一篇： html css基础知识