JS/jQ常用宽高及应用

关于js的宽高,随便一搜就是一大堆。这个一大堆对我来说可不是什么好事,看的头都大了。所以今天就总结了一些比较会常用的,并说明一下应用场景。

成都创新互联服务项目包括华容网站建设、华容网站制作、华容网页制作以及华容网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,华容网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到华容省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

先来扯一下documentElement和body的微妙关系:

documentElement===html  ----->>    documentElement.childNode[2]===body  【很明显,父子关系呗】

如果中没声明html,则拿不到documentElement这个值,但此时body==documentElement,这才有了下面的兼容写法.

 

ps:以下内容就只谈论height,width同理嘛。

js的宽高及应用:

可视区尺寸(.clientHeight):

            对document:可视区height = 整个浏览器的高 - 工具栏部分height.

                 兼容写法:document.documentElement.clientHeight||document.documentElement.clientHeight.

            对div:可视区height = height + padding.

             写法:divObj.clientHeight.

滚动距离(.scrollTop):

           对document:可视区顶部到网页顶部,即网页被卷上去的部分.

                获取兼容写法:document.body.scrollTop || document.documentElement.scrollTop.

                设置兼容写法:document.body.scrollTop = document.documentElement.scrollTop=...

           对div:div被卷上去的部分.

                获取写法:divObj.scrollTop.

                设置写法:divObj.scrollTop=...

.scrollHeight:

           对document: document.body.scrollHeight被视为整个网页的高。【网页内容大于clientHeight时】

                获取写法:document.body.scrollHeight.

          对div:没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWidth属性结果相等;

                   存在滚动条,即存在内容溢出的情况时,scroll属性大于client属性,divObj.scrollHeight包括被隐藏部分。scrollHeight可用于获取div的wholeHeight以实现滚动到底部加载。

         【注意】scrollHeight属性存在兼容性问题,chrome和safari浏览器中,scrollHeight包含padding-bottom;而IE和firefox不包含padding-bottom.

.offsetHeight:

         对document:

                  IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。 

         对div:

              divObj.offsetHeight=height+padding+border.

 

安利一个好东西:

.getBoundingClientRect().top/right/bottom/left;  //div的各边距可视区的距离.

 

JS/jQ常用宽高及应用

可视区加载:

JS/jQ常用宽高及应用

1 function showDiv(){2    var showId=document.getElementById("showDiv");3    var clients=window.innerHeight||document.documentElement.clientHeigh||document.body.clientHeigh;4    var divTop=showId.getBoundingClientRect().top;
     //判断是否出现在可视区了5    if(divTop<=clients){6       showId.classList.add('fadeInLeft');//一个带有动画的类7    }8 }

JS/jQ常用宽高及应用

 

 

jQ的宽高及应用:

width() | height():可读写。(length) | function(index,oldWidth){  }

innerWidth() | innerHeight():可读写。(length) | function(index,oldWidth){  }

outerWidth(Boolean) | outerHeight(Boolean):为true时包括margin,false时不包括margin.

 

.scrollTop() | .scrollLeft:被卷走的宽高。

.offset().top/left :相对于document.

.position().top/left :相对于offsetParent.

 

常用的属性:

$(window).height();--可视区高

$(window).scrollTop();--滚上去的部分

$(document).height();--整个文档的高

 

滚动到底部:

JS/jQ常用宽高及应用

$(window).scroll(function(){ var scrollTop = $(this).scrollTop();    //滚动条距离顶部的高度
 var scrollHeight = $(document).height();   //当前页面的总高度
 var clientHeight = $(this).height();    //当前可视的页面高度
 
 if(scrollTop + clientHeight >= scrollHeight){   //滑动到底部 count++;         //每次滑动count加1
    alert("滚动底部了");
 }});

JS/jQ常用宽高及应用


本文标题:JS/jQ常用宽高及应用
文章源于:http://myzitong.com/article/peeidh.html