http://www.fgm.cc/learn/
First class ,6 examples anlaysisi
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Change Attribute?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0;
margin:0;
}
#changeAttr{
width:370px;
/*width:auto or 100%, not center*/
margin:100px auto;
border:1px solid #000000;
padding:50px; }
#obj{
width:150px;
margin:20px auto;
height:150px;
background-color:black;
}
</style>
</head>
<body>
<div id='changeAttr'>
<h1>Change Attribute</h1>
<div id='content'>
<input id='chWidth' type='button' value='CH WIDTH'/>
<input id='chHeight' type='button' value='CH HIGHT'/>
<input id='chColor' type='button' value='CH COLOR'/>
<input id='chHide' type='button' value='CH HIDE'/>
<input id='chReset' type='button' value='CH RESET'/>
<div id='obj'></div>
</div>
</div>
<script>
// window.onload = function(){
// var chWidth = document.getElementById("chWidth");
// var chHeight = document.getElementById("chHeight");
// var chColor = document.getElementById("chColor");
// var chHide = document.getElementById("chHide");
// var chReset = document.getElementById("chReset");
// var obj = document.getElementById("obj");
//
// chWidth.onclick = function(){
// obj.style.width = '300px';
// }
// chHeight.onclick = function(){
// obj.style.height = '300px';
// }
// chColor.onclick = function(){
// obj.style.backgroundColor = '#ff0000';
// }
// chHide.onclick = function(){
// obj.style.display = 'none';
// }
// chReset.onclick = function(){
// obj.style.width = '150px';
// obj.style.height = '150px';
// obj.style.backgroundColor = '#000000';
// obj.style.display = 'block';
// }
// } // var changeStyle = function (elem, attr, value)
// {
// elem.style[attr] = value
// };
// window.onload = function ()
// {
// var oBtn = document.getElementsByTagName("input");
// var oDiv = document.getElementById("obj");
// var oAtt = ["width","height","background","display","display"];
// var oVal = ["200px","200px","red","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 = "");
// console.log(this.index);
// changeStyle(oDiv, oAtt[this.index], oVal[this.index])
// }
// }
// }; var changeStyle = function(ele,attr,val){
ele.style[attr] = val;
};
window.onload = function(){
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("obj");
var oAttr = ["width","height","backgroundColor","display","display"];
var oVal = ["200px","200px","red","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 = "");
//console.log(this.index);
changeStyle(oDiv,oAttr[this.index],oVal[this.index]);
};
}
} </script>
</body>
</html>
1.width auto or 100%, not center;
2.good at using for ,like getElementsByTagName('input');
3.this.index == oBtn.length - 1 && (oDiv.style.cssText = ""); like
if(a >=5){
alert("你好");
}
可以写成：
a >= 5 && alert("你好");
4. look at 3,oDiv.style.cssText = "",all recover,it means add style through js,then the style go to html lines, when you clean style,you just clean style inline,not the style in<style> or stylesheet.
1.首次打开页面时候便已有默认风格
不好：在全局里面设置一次风格，然后在onclick里面在写一遍同样的代码
改进：在<style>先给风格，只是以后点击会更换风格，减少代码量
2.border:横排 有重复边
不好：给每个子元素每边都加，然后统一去掉右边框，最好给父元素或最后一个子加一个右边框
改进：父每边都有，子统一有右边框，最后去掉最后子的右边框；来回折腾的减少
3.<li>red</li> 加text-indent：-9999px；方便理解
4.去掉外层div ，当里面li：float：left时，ul仍然可以包住li
5.<a href="javascript:;"></a>
1. input 前必须加#content，否则margin-bottom会被#content中的margin覆盖，（优先级不够），by the way,有padding好看多了
#################################################################################
1.text-align：center，对div：block不管用，对inline-block管用
2.子元素float之后，父{width:xxxpx;margin:0 auto;},此时虽然没有包住子，但子依然居中；父加上height，就包住子
#########################################################################
