标签：style blog http color io 使用 ar java for
javascript学习笔记(一)
本来是搞.net这块的，因为入门的时候听一些前辈说在实际项目中提高最快，(事实上当第一个网站做下来，虽然仅仅是可以实现增删查改的基本功能都很有成就感)加之之前对这些对html,js这些标签语言，解释性语言有偏见。认为这些东西太容易，于是没怎么认真去找出时间专门学这一块。结果现在js,css都只限于能看懂，会调用。一步一步码代码的能力却做不到。窃以为这些最基础的东西才是最核心的东西，于是回归初心，老老实实的按着例子准备深入学习。目标是可以做到一个网站代码纯手工打造。可以熟练使用原生js，随手就能写个网页布局什么的。
练习的例子来源于http://js.fgm.cc/learn/
实现步骤：首先用html,css把demo的样式定下来，然后用js实现功能。
第一步 实现样式
上代码
<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>控制div属性</title> <style> #outer{width:500px;margin:0 auto;padding:0;text-align:center;} #div1{width:100px;height:100px;background:red;margin:10px auto;display:block;} </style> </head> <body> <div id="outer"> <input type="button" value="变宽"> <input type="button" value="变高"> <input type="button" value="变色"> <input type="button" value="隐藏"> <input type="button" value="重置"> </div> <div id="div1"> </div> </body> </html>
第二步，用js实现功能
<script> var changeStyle = function (elem, attr, value)//创建包含三个参数的changStyle函数， { elem.style[attr] = value }; window.onload = function () { var oBtn = document.getElementsByTagName("input"); var oDiv = document.getElementById("div1");//操作对象 var oAtt = ["width","height","background","display","display"];//属性 var oVal = ["200px","200px","blue","none","block"];//值 for (var i = 0; i < oBtn.length; i++) { oBtn[i].index = i; oBtn[i].onclick = function () { this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); changeStyle(oDiv, oAtt[this.index], oVal[this.index]) } } }; </script>
参考链接：
http-equiv是什么意思 http://blog.csdn.net/boat1980/article/details/2142291
CSS-margin外边距 http://www.w3school.com.cn/css/css_margin.asp
CSS-padding内边距 http://www.w3school.com.cn/css/css_padding.asp
CSS-text-align文本 http://www.w3school.com.cn/css/css_text.asp
CSS-display块元素 http://www.w3school.com.cn/cssref/pr_class_display.asp
标签：style blog http color io 使用 ar java for
原文地址：http://www.cnblogs.com/code-charmer/p/4020934.html
