$(obj).width()与$(obj).height()

$(obj).width()$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条

$(obj).width() = width
$(obj).height() = height

$(window).width()$(window).height():获得的是屏幕可视区域的宽高,不包括滚动条与工具条。

$(window).width() = width + padding
$(window).height() = height + padding

document.documentElement.clientWidth与document.documentElement.clientHeight

document.documentElement.clientWidth与document.documentElement.clientHeight:获得的是屏幕可视区域的宽高,不包括滚动条与工具条,跟jquery的(window).width()与(window).height()获得的结果是一样的。

document.documentElement.clientWidth = width + padding
document.documentElement.clientHeight = height + padding

window.innerWidth与window.innerHeight

window.innerWidthwindow.innerHeight:获得的是可视区域的宽高,但是window.innerWidth宽度包含了纵向滚动条的宽度,window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。

window.innerWidth = width + padding + border + 纵向滚动条宽度
window.innerHeight = height + padding + border + 横向滚动条高度

window.outerWidth与window.outerHeight

window.outerWidthwindow.outerHeight:获得的是加上工具条与滚动条窗口的宽度与高度。

window.outerWidth = width + padding + border + 纵向滚动条宽度
window.outerHeight = height + padding + border + 横向滚动条高度 + 工具条高度

document.body.clientWidth与document.body.clientHeight

document.body.clientWidthdocument.body.clientHeight:document.body.clientWidth获得的也是可视区域的宽度,但是document.body.clientHeight获得的是body内容的高度,如果内容只有200px,那么这个高度也是200px,如果想通过它得到屏幕可视区域的宽高,需要样式设置,如下:

body {
height: 100%;
overflow: hidden;
}
body, div, p, ul {
margin: 0;
padding: 0;
}

最关键的是:body的height:100%影响document.body.clientHeight的值。body的margin:0,padding:0影响document.body.clientWidth的值。

offsetWidth & offsetHeight

返回本身的宽高 + padding + border + 滚动条

offsetLeft & offsetTop

所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标

1.相对于已定位元素的后代元素和一些其他元素(表格单元),这些属性返回的坐标是相对于祖先元素
2.一般元素,则是相对于文档,返回的是文档坐标

//获取元素的纵坐标(相对于窗口)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标(相对于窗口)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

当然上面的代码是在反复调用自身方法,也可以下面这个方法来实现,主要使用while语句:

 function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器,如果存在则累加其边距
while (obj = obj.offsetParent) {//等效 obj = obj.offsetParent;while (obj != undefined)
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
alert("top: " + t + " left: " + l);
}

怎样理解offsetParent,人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关定位父级offsetParent的定义是:与当前元素最近的经过定位(position不等于static)的父级元素,主要分为下列几种情况 :

【1】元素自身有fixed定位,offsetParent的结果为null

当元素自身有fixed固定定位时,我们知道固定定位的元素相对于视口进行定位,此时没有定位父级,offsetParent的结果为null

[注意]firefox浏览器有兼容性问题

<div id="test" style="position:fixed"></div>
<script>
//firefox并没有考虑固定定位的问题,返回<body>,其他浏览器都返回null
console.log(test.offsetParent);
</script>

【2】元素自身无fixed定位,且父级元素都未经过定位,offsetParent的结果为<body>

<div id="test"></div>
<script>
console.log(test.offsetParent);//<body>
</script>

【3】元素自身无fixed定位,且父级元素存在经过定位的元素,offsetParent的结果为离自身元素最近的经过定位的父级元素

<div id="div0" style="position:absolute;">
<div id="div1" style="position:absolute;">
<div id='test'></div>
</div>
</div>
<script>
console.log(test.offsetParent); //<div id="div1">
</script>

【4】<body>元素的parentNode是null

console.log(document.body.offsetParent);//null

scrollWidth & scrollHeight

这两个属性是元素的内容区域加上内边距,在加上任何溢出内容的尺寸.
因此,如果没有溢出时,这些属性与clientWidth和clientHeight是相等的。

scrollLeft & scrollTop

指定的是元素的滚动条的位置
scrollLeft和scrollTop都是可写的属性,通过设置它们来让元素中的内容滚动。

实例1:获取当前页面滚动条纵坐标的位置

获取当前页面滚动条纵坐标的位置:document.body.scrollTop与document.documentElement.scrollTop
获取当前页面滚动条横坐标的位置:document.body.scrollLeft与document.documentElement.scrollLeft

各浏览器下获取scrollTop的差异

  • IE6/7/8:可以使用 document.documentElement.scrollTop
  • IE9及以上:可以使用window.pageYOffset或者document.documentElement.scrollTop
  • Safari:window.pageYOffset 与document.body.scrollTop都可以;
  • Firefox::火狐等等相对标准些的浏览器就省心多了,直接用window.pageYOffset或者 document.documentElement.scrollTop
  • Chrome:谷歌浏览器只认识document.body.scrollTop;

注:标准浏览器是只认识documentElement.scrollTop的,但chrome虽然我感觉比firefox还标准,但却不认识这个,在有文档声明时,chrome也只认识document.body.scrollTop.

由于在不同情况下,document.body.scrollTop与document.documentElement.scrollTop都有可能取不到值,那到底网页的scrollTop值怎么得到呢?难道又要用JavaScript进行判断?

其实不必。因为document.body.scrollTop与document.documentElement.scrollTop两者有个特点,就是同时只会有一个值生效。比如document.body.scrollTop能取到值的时候,document.documentElement.scrollTop就会始终为0;反之亦然。所以,如果要得到网页的真正的scrollTop值,如果不考虑safari,可以这样

var sTop=document.body.scrollTop+document.documentElement.scrollTop;(但是一般都不这样做的)
这两个值总会有一个恒为0,所以不用担心会对真正的scrollTop造成影响。一点小技巧,但很实用。

获取scrollTop的值

可以使用window.pageYoffset

Window pageXOffset 和 pageYOffset 属性其定义:pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。所有主流浏览器都支持 pageXOffset 和 pageYOffset 属性。

注意: IE 8 及 更早 IE 版本不支持该属性,但可以使用 "document.documentElement.scrollLeft" 和 "document.documentElement.scrollTop" 属性 。

由于谷歌兼容问题,可以使用document.body.scrollLeftdocument.body.scrollTop 或者window.pageXoffsetwindow.pageYoffset

最终兼容做法:

var heightTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(heightTop);

实例2:获取某个元素距离文档区域的距离

jQuery实现方式:

var top = $('.btn').offset().top;
console.log(top); //2080

JS实现方式:

function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器,如果存在则累加其边距
while (obj = obj.offsetParent) {
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
return {
x:l,
y:t
}
} var top2 = getPoint(document.getElementsByClassName('btn')[0]);
console.log(top2.y); //2080

实例3:监听某个元素是否已经在可视区域

实现思路:获取当前监听元素距离文档的左上角的top距离;根据这个距离和当前可视区域的高度+文档滚动距离进行比较,即scrollTop <= top <= document.documentElement.clientHeight + scrollTop

jquery实现方式:

$(function(){
var top = $("#btn").offset().top; //距离文档顶部的距离
var windowHeight = document.documentElement.clientHeight; //可视区域的高度
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(top >= scrollTop && top <= windowHeight + scrollTop){
console.log('在可视区域了');
}
});
})

JS实现方式:

function getPoint(obj) { //获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器,如果存在则累加其边距
while (obj = obj.offsetParent) {
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
}
return {
x:l,
y:t
}
} window.onload = function(){
var top = getPoint(document.getElementById('btn')).y; //距离文档顶部的距离
var windowHeight = document.documentElement.clientHeight; //可视区域的高度
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(top >= scrollTop && top <= windowHeight + scrollTop){
console.log('在可视区域了');
}
}
}

JS基础篇--JS获取元素的宽高以及offsetTop,offsetLeft等的属性值的更多相关文章

  1. JS获取元素的宽高以及offsetTop,offsetLeft等的属性值

    基本介绍 $(obj).width()与$(obj).height() $(obj).width()与$(obj).height() :jquery方式获取元素的宽高,不包括滚动条与工具条 $(obj ...

  2. jquery获取元素各种宽高及页面宽高总结

    window.onload=function(){ var a = $("#div").width(),//width()返回元素的宽高,不包括padding/border/mar ...

  3. jquery获取元素各种宽高及页面宽高

    如何使用jquery来获取网页里各种高度? 示例如下: $(document).ready(function(){  var divWidth = $("#div").width( ...

  4. JS基础篇--JS的event.srcElement与event.target(触发事件对象)

    IE下,event对象有srcElement属性,但是没有target属性; Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即: fire ...

  5. 自动化测试基础篇--Selenium获取元素属性

    摘自https://www.cnblogs.com/sanzangTst/p/8375938.html 通常在做断言之前,都要先获取界面上元素的属性,然后与期望结果对比. 一.获取页面title 二. ...

  6. 如何获取设置display:none元素及子元素的宽高

    由于元素设置了display:none时,页面便不会对其渲染,导致无法获取其元素的宽高.目前一般的做法都是先对其设置display:block,拿到数据再设置其为display:none.如此便可以了 ...

  7. 隐藏元素的宽高无法通过原生js获取的问题

    1.起源:移动app项目中,页面加载时需要加载国家下拉列表,将隐藏的透明浮层和一个显示加载过程中的框 显示出来,隐藏的透明浮层设置宽高都是100%即可,而这个加载提示框需要先得出它的宽高,然后再根据页 ...

  8. js进阶 11-6 jquery如何获取和设置元素的宽高(jquery多方法)

    js进阶 11-6  jquery如何获取和设置元素的宽高(jquery多方法) 一.总结 一句话总结:jquery里面多是方法啊,比如jquery对象的宽高.所以取值是方法,赋值就是方法里面带参数. ...

  9. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

随机推荐

  1. <el-tree>文字显示不全解决办法(可以用省略号代替)

    地址: https://www.jianshu.com/p/229f96b794d3

  2. zabbix 磁盘自动发现脚本

    ##需要在zabbix界面配置宏变量===>正则来匹配磁盘 disk_discovery.sh ———————————————————————————————————————————————— ...

  3. docker小知识

    1,docker 使用普通用户 添加用户组: sudo groupadd docker 加入docker 组 sudo gpasswd -a ${USER} docker 或 usermod -aG ...

  4. [模板] Kruskal算法 && 克鲁斯卡尔重构树

    克鲁斯卡尔重构树 发现没把板子放上来... 现在放一下 克鲁斯卡尔算法的正确性是利用反证法证明的. 简要地说, 就是如果不加入当前权值最小的边 \(e_1\), 那么之后加入的边和这条边会形成一个环. ...

  5. C++STL中的unique函数

    头文件:#include<iostream> 函数原型:iterator unique(iterator it_1,iterator it_2); 作用:元素去重,即”删除”序列中所有相邻 ...

  6. nuget push 程序包到nuget服务器时报错 406 (Not Acceptable)

    1.在window服务器上部署nuget服务器时,发布包时出现请求报错 406 (Not Acceptable) 验证用户名.密码正确的情况下,还是出现上面错误.后面跟踪服务器日志,发现window\ ...

  7. 字符串处理工具StringUtils

    package yqw.java.util; import java.io.File;import java.text.ParseException;import java.text.SimpleDa ...

  8. JMS学习三(ActiveMQ消息的可靠性)

    下面我们来学习一下消息接受确认和发送持久化消息.消息的过期.消息的选择器和消息的优先级. 一.消息接收确认 1.jms消息只有在被确认之后才认为成功消费了这条消息.消息的成功消费通常包括三个步骤:(1 ...

  9. Vue-router 中hash模式和history模式的区别

    实际上存在三种模式: Hash: 使用URL的hash值来作为路由.支持所有浏览器. History: 以来HTML5 History API 和服务器配置.参考官网中HTML5 History模式 ...

  10. (转载)FM 算法

    (转载)FM算法 https://zhuanlan.zhihu.com/p/33184179