用jsp做网站登录界面模板,广东省自然资源厅,谷歌推广外贸建站,企业网站关联优化1、需求分析 改变元素的宽、高、颜色、显示、重置等属性。
2、技术分析 基础的css、html、js
3、详细分析
如图#xff0c;单击按钮#xff0c;改变元素属性: 3.1 HTML部分
根据视图不难发现#xff0c;内容分两大不分:按钮栏和效果图#xff0c;所以设置两个div。 单击按钮改变元素属性: 3.1 HTML部分
根据视图不难发现内容分两大不分:按钮栏和效果图所以设置两个div。 bodydiv classouterinput typebutton value变宽 input typebutton value变高 input typebutton value变色 input typebutton value隐形 input typebutton value重置 /divdiv classcontent /div
/body3.2 CSS部分 style typetext/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 typetext/javascriptvar changeStylefunction(elem,attr,value){//声明一个函数包含三个参数(元素属性值)外部函数1elem.style[attr]value//三个参数之间的函数关系元素的样式属性的集合等于值(点操作符:对象方括号操作符:对象数组)};window.onloadfunction(){//文档加载完成时调用函数/*声明四大变量按钮元素属性值*/var btndocument.getElementsByTagName(input);//按钮变量来自标签var cttdocument.getElementClssName(content);//元素变量来自类名var att[width,height,background,display,display];//属性名数组集合var val[200px,200px,red,none,block];//属性值数组集合属性值与属性名一一对应for(var i0;ibtn.length;i ){btn[i].indexi;//数组btn中元素的索引值i,给按钮数组中的每个元素编号btn[i].onclickfunction(){//给数组中的元素添加点击事件点击第i个按钮调用函数 changeStyle(ctt,att[this.index],val[this.index])//结合外部函数1形成闭包ctt为元素this.index为按钮数组中元素的索引值即i;属性att数组的第this.indexi个元素属性值数组val的第this.indexi个元素值。this.indexbtn.length-1(ctt.style.cssText );//可写成:if(this.indexbtn.length-1){ctt.style.cssText},点击第四个按钮清空css样式(cssText()适用块元素)}}}
/script本文转载于:猿2048➼https://www.mk2048.com/blog/blog.php?id0ijccjbtitle控制元素的div属性
