JavaScript与jQuery获取元素的宽、高和位置

今天汇总整理了 JavaScript 和 jQuery 获取元素宽高和位置的方法,比较全面,方便自己和需要并搜到此文章的朋友们查看。

先贴一下基础代码:

<head>
    <style>
        #myDiv {
            height: 300px;
            width: 300px;
            margin: 18px auto;
            padding: 15px;
            border: 5px solid #dddddd;
        }
    </style>
</head>
<body>
<div id="myDiv">

</div>
<script>
    var div = document.getElementById("myDiv");
    console.log(div.getBoundingClientRect());
</script>

JavaScript中:

获取坐标

getBoundingClientRect() :获取元素相对于浏览器视口的的坐标,返回一个Object对象,有6个属性:top | left | right | bottom | width | height。几乎所有浏览器都支持该方法。

注意:right 是指元素右边界距窗口最左边的距离,bottom 是指元素下边界距窗口最上面的距离。

举例:

console.log(div.getBoundingClientRect());

控制台打印结果:

JavaScript与jQuery获取元素的宽、高和位置 经验总结 第1张

可视宽高

clientHeight :元素的可视高度(包括内边距,不包括边框、外边距或滚动条)

clientWidth :元素的可视宽度(包括内边距,不包括边框、外边距或滚动条)

自身宽高

offsetHeight :元素的高度(包括边框和内边距,不包括外边距)

offsetWidth :元素的宽度(包括边框和内边距,不包括外边距)

偏移值

offsetLeft :元素的相对水平偏移位置(左边界距离可视区域最左侧的距离)

offsetParent :元素的偏移容器(父元素)

offsetTop :元素的相对垂直偏移位置(上边界距离可视区域最上边的距离)

事迹宽高

scrollHeight :整个元素的高度(包括带滚动条的隐蔽的地方)

scrollWidth :元素的整个宽度(包括带滚动条的隐蔽的地方)

鼠标滚动距离

scrollLeft :是该元素的显示(可见)的内容上边与该元素实际的内容的距离(滚动条滚去的宽度)

scrollTop :是该元素的显示(可见)的内容与该元素实际的内容的距离(滚动条滚去的高度)

jQuery中:

JavaScript与jQuery获取元素的宽、高和位置 经验总结 第2张

鼠标相对于页面的位置

event.pageX :鼠标相对于页面左边缘的距离。

event.pageY :鼠标相对于页面上边缘的距离。

元素的位置偏移量

offset() :返回包含 top 和 left 两个属性的对象,相对于 document 文档的坐标。

position():返回包含top和left两个属性的对象,相对于最近的已定位的包含元素的位置。若无,则相对于document。只对可见元素有效,注意ele{visibility:hidden}也属于可见元素。

元素的宽高

width() :获得或设置元素【内容】的宽;若元素的display:none,其值为0

height() :获得或设置元素【内容】的高;若元素的display:none,其值为0

innerWidth() :获得包括内边距(padding)的元素宽度,不包括边框

innerHeight() :获得包括内边距(padding)的元素高度,不包括边框

outerWidth() :获得包括内边距(padding)和边框(border)的元素宽度

outerHeight() :获得包括内边距(padding)和边框(border)的元素宽度

outerWidth(true) :获得整个元素的宽度,包括外边距、边框、内边距和内容

outerHeight(true) :获得整个元素的高度,包括外边距、边框、内边距和内容

注意:

1)ele.css("height") :返回带有完整单位的字符串(例如400px),若运算需要parseInt转换。ele.height() :返回一个没有单位的number数值(例如400)。

2)height() 总是返回内容宽度,不管CSS box-sizing 属性值。若CSS box-sizing 为 border-box,将造成这个函数改变这个容器的 outerHeight ,而不仅是原来的内容高度。

浏览器相关宽高

$(window).height() :获取浏览器可视窗口的高度;

$(document).height() :获取整个网页文档的高度;当网页高度不足浏览器窗口时,返回的是 $(window).height()

$(document).scrollTop() :document 元素相对 document 元素对应的滚动条顶部的垂直偏移量,可获取已滚动的距离或设置将要滚动的距离。

即:当网页滚动条拉到最低端时:

$(document).height() == $(window).height() + $(window).scrollTop()

注意:不建议使用 $("html").height()$("body").height() 这样的方法获取高度,原因有:

$("body").height() :body可能会有边框,获取的高度会比 $(document).height() 小;

$("html").height() :在不同的浏览器上获取的高度会有差异,浏览器不兼容。

$(window).height() :若返回的不是浏览器窗口的高度,可能是网页没有加上 <!DOCTYPE> 声明。


未经允许不得转载:前端资源网 - w3h5 » JavaScript与jQuery获取元素的宽、高和位置

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)