控制元素的div属性】的更多相关文章

1.需求分析 改变元素的宽.高.颜色.显示.重置等属性. 2.技术分析 基础的css.html.js 3.详细分析 如图,单击按钮,改变元素属性: 3.1 HTML部分 根据视图不难发现,内容分两大不分:按钮栏和效果图,所以设置两个div. <body> <div class="outer"> <input type="button" value="变宽" > <input type="butt…
总结: 1. 注意body里的结构安排,全部装在大div,避免多次设置不同部分居中. 2. 一排按钮居中:装在大div里,text-align: center; 3. 把相同的部分封装成函数,即 同个 oDiv,都是attr 属性 设置 value. var changeStyle = function (elem, attr, value) { elem.style[attr] = value }; 4. 用数组的方式,把每个要设置的attr 和 对应的 value 装起来,直接到数组里用th…
要开始练练js了,决定先按照Ferris大大的索引表一个个练,头一个就是控制div属性啦.看似挺简单的,不过平时jquery用惯了,用起来原生js还有点手生呢. 总之就是模仿加练习啦,先看看效果: 一.结构就是这样啦:(就是喜欢用a标签,任性.) <div id="smallBox01"> <a href="#" class="button01">变宽</a> <a href="#"…
写在最前面:Demo的源起来自于http://js.fgm.cc/learn/,但是实现部分都是经过自己思考和优化的,有时会借助别人的图片,然而“窃喜”.如无特殊说明,demo都是经过ie6.ie7等低版本浏览器测试通过的.表要笑话我有“自虐”倾向,各种是有情节和情结的.力图做的专业再专业一点点.^_^ 功能实现:单击响应的功能按钮实现DIV属性的切换 Demo地址:http://yuyingguo.sinaapp.com/jsStudy/控制div属性.html 有图有真相: 自己的代码实现:…
写在前面: 从事前端工作已有一年之久,因为工作的性质,不太涉及JS方面,所以自己的JS水平一直处于小白阶段,工作闲暇之余,在网上找了一些小项目,希望练练手,促进自己成长.这是第一篇,后续还会有很多记录自己慢慢走过来的路程,文章纯属记录自己的所思所想,谨个人想法,存在不足,欢迎指正. 项目介绍: 从最简单的开始,在网上找到了一个简单的用JS控制DIV属性的小项目,咋一看很简单,自己动手之后才发现自己的代码之冗余和初阶,深深汗颜 - -.先写自己想法路程,然后把大牛源码奉上,涉及相关知识点一一记录.…
点击按钮变换属性: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co…
写在前面: 因对前端开发感兴趣,于是自学前端技术,现在已经会HTML.CSS.JavaScript基础技术.但水平处于小白阶段,在网上找一些小项目练练手,促进自己的技术成长.文章记录自己的所思所想,以及借鉴前端大牛的思路,谨个人想法,存在不足,欢迎指正. 项目介绍: 从最简单的开始,在网上找到了一个简单的用JS控制DIV属性的小项目,咋一看很简单,自己动手之后才发现自己的代码之冗余和初阶,深深汗颜.先写自己想法路程,然后把大牛源码奉上,涉及相关知识点一一记录. 项目效果图 整体思路,先变量保存属…
LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!! LinearLayout的gravity属性以及其子元素的layout_gravity何时有效 转自:http://www.cnblogs.com/xiaoran1129/archive/2013/03/26/2982733.html 相信对于Android的初学…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
js 控制展开折叠 div    html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;chars…