您的位置：首页 > 其它

First class ,6 examples anlaysisi

2015-12-29 21:57 399 查看

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，就包住子

#########################################################################

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航