<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>求高度的方法</title> <style type="text/css"> * { margin:0; padding:0; } html, body { width:100%; height:100%; overflow:hidden; display:block; } .a { height:100px; background:red; padding:10px; } .s { overflow:auto; line-height:30px; background:#6F6; } .s ul li{ margin-left:40px;} </style> <script type="text/javascript"> var wzw={ //清楚字符串里面的开始和结束的空格还有合并中间的多个空格为一个空格 trim:function(str){ var reg=/s+/g; var a=/^s/; var b=/s$/; return str.replace(b,"").replace(a,"").replace(reg," "); }, //获取制定的class 元素 getByClass:function (oClass,id){ var re=[]; var id=id||document; if(document.getElementsByClassName){ re=id.getElementsByClassName(oClass); }else{ var aChild=id.getElementsByTagName("*"); var reg=new RegExp("\b" + oClass + "\b"); for(var i=0;i<aChild.length;i++){ if(aChild[i].nodeType=="1"){ var aClassCllect=aChild[i].className; //var jianhua=wzw.trim(aClassCllect); if(reg.test(aClassCllect)){ re.push(aChild[i]); }; } } } return re; }, //获取计算后的实际样式属性 getCss:function(obj,attr){ return (obj.currentStyle||getComputedStyle(obj, false))[attr];; }, nextsiblingsHeight:function(obj){ var he=0; var nexts=obj.nextSibling; while(nexts){ if(nexts.nodeType=="1"){ he=he+nexts.offsetHeight; } nexts=nexts.nextSibling; } return he; }, high:function(obj,minHeight){ var oParent=obj.parentNode; var minHeight=minHeight||0; if(oParent.nodeName.toLowerCase()=="body"){ var oParentHeight=document.body.clientHeight; }else{ var oParentHeight=parseInt(wzw.getCss(oParent,"height")) }; var oTop=obj.offsetTop; var nextsHeight=wzw.nextsiblingsHeight(obj); var cha=oParentHeight-oTop-nextsHeight; if(cha<minHeight){ obj.style.height=minHeight+"px"; }else{ obj.style.height=cha+"px"; } } } window.onload=function(){ var ss=wzw.getByClass("s")[0]; //wzw.high(ss,20) //window.onresize=function(){wzw.high(ss,20)}; //测试以class获取元素 var f=document.getElementById("a"); var d=wzw.getByClass("d"); for(var i=0;i<d.length;i++){ d[i].style.color="red"; } } </script> </head> <body class="c"> <div class="a"></div> <div class="s"> <ul> <li>我是第一行</li> <li>我是<a href="#" class="d">第一</a>行</li> <li id="a">我<b class="d">是第一</b>行</li> <li>我是第一行</li> <li>我<em class="d f e">是第一</em>行</li> </ul> </div> <div class="a"></div> </body> </html>
我在工作中经常遇到这种情况，如下图，红色的高度是固定的，希望绿色的高度，可以占据父级的高度减去所有红色区域高度的差，这样绿色的区域就可以出滚动条，而整体不动了。于是我就做了这样一个小玩意，没有想到开发还是很喜欢的，自娱自乐吧，为了好用一些加上了以前写的获取class名称的方法，毕竟id不是谁都可以用的
