JavaScript小结

来源：互联网发布：大数据行业工资编辑：程序博客网时间：2024/06/03 21:13

js获取html元素style

function getAttrStyle(obj, attr){      if(obj.currentStyle){          return obj.currentStyle[attr];      }else{          return document.defaultView.getComputedStyle(obj,false)[attr];      }  }

getElementByClassName

var getElementsByClassName = function (searchClass, node,tag) {  if(document.getElementsByClassName){    var nodes =  (node || document).getElementsByClassName(searchClass),result = [];      for(var i=0 ;node = nodes[i++];){        if(tag !== "*" && node.tagName === tag.toUpperCase()){          result.push(node)        }else{          result.push(node)        }      }      return result    }else{      node = node || document;      tag = tag || "*";      var classes = searchClass.split(" "),      elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),      patterns = [],      current,      match;      var i = classes.length;      while(--i >= 0){        patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));      }      var j = elements.length;      while(--j >= 0){        current = elements[j];        match = false;        for(var k=0, kl=patterns.length; k<kl; k++){          match = patterns[k].test(current.className);          if (!match)  break;        }        if (match)  result.push(current);      }      return result;    }  }

CSS Position:absolute and Relative and fixed

在position属性值为absolute的同时，如果有一级父对象（无论是父对象还是祖父对象，或者再高的辈分，一样）的Position属性值为Relative时，则上述的相对浏览器窗口定位将会变成相对父对象定位

如果在position属性值为fixed，那么这个元素是相对于窗口的，浏览器窗口。它不随滚动条等改变。但是如果当前浏览器太小时候，元素会显示不出来。

css经典布局——头尾固定高度中间高度自适应布局

CSS 中 html, body的top从 0 改为 50px，再看看效果

<!DOCTYPE HTML><html>    <head>        <meta charset="utf8">            <title>头尾固定中间高度自适应布局</title>            <style>                html, body {                    height:100%;                    margin:0;                    padding:0;                    position:relative;                    top:0;                }            #dHead {                height:100px;                line-height:100px;                background:#690;                width:100%;                position:absolute;                z-index:5;                top:0;                text-align:center;            }            #dBody {                background:#FC0;                width:100%;                overflow:auto;                top:100px;                position:absolute;                z-index:10;                bottom:100px;            }            .mycontent {                padding:20px;            }            #dFoot {                height:100px;                line-height:100px;                background:#690;                width:100%;                position:absolute;                z-index:200;                bottom:0;                text-align:center;            }            </style>    </head>    <body padding="50px" position=“relative”>        <div id="dHead">固定头部100px;</div>        <div id="dBody">            <div class="mycontent"> 中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>                中间自适应部分<br>            </div>        </div>        <div id="dFoot">固定尾部100px</div>    </body></html>

参考

http://lzhw1985.iteye.com/blog/1633963
http://www.zhixing123.cn/asp/35835.html
http://www.cnblogs.com/pigtail/archive/2012/11/25/2787508.html

0 0