Js与Jq 获取页面元素值的方法和差异对比

介绍原生JavaScript与jQuery在获取浏览器及对象宽高方面的微妙差异

你是否曾对JavaScript（JS）和jQuery在获取浏览器及页面元素宽高方面的功能感到困惑？二者能否互相替代？写法又有哪些不同？本文将带你一竟。

一、获取浏览器的高度和宽度

对于原生JS来说，我们可以通过以下方式获取浏览器的宽度和高度：

`document.documentElement.clientWidth`：浏览器可见区域的宽度。

`document.documentElement.clientHeight`：浏览器可见区域的高度。

`document.body.clientWidth`：BODY对象的宽度。

`document.body.clientHeight`：BODY对象的高度。

而在jQuery中，我们可以使用以下方法获取浏览器的高度和宽度：

`$(window).width()`：浏览器可见区域的宽度。

`$(window).height()`：浏览器可见区域的高度。

`$(document).height()`：页面文档的总高度。

二、获取对象的高度和宽度

对于原生JS，我们可以通过访问对象的样式属性来获取其宽度和高度：

`obj.width = obj.style.width`

`obj.clientWidth` 可以获取包括内边界（padding）的元素宽度。

`obj.offsetHeight` 可以获取包括内边界(padding)和边框(border)的元素高度。

而在jQuery中，我们可以使用以下方法获取对象的高度和宽度：

`objnerWidth()`：获取包括内边界（padding）的元素宽度。

`obj.outerWidth()`：获取包括内边界(padding)和边框(border)的元素宽度。

`obj.outerWidth(true)`：获取包括外边界(margin)的元素宽度。同一个元素，其width() <= innerWidth() <= outerWidth() <= outerWidth(true)。

三、获取对象的相对高度和宽度

对于原生JS，我们可以通过以下方式获取对象的相对高度和宽度：

`obj.offsetLeft`：元素相对于父元素的左侧偏移量。

`obj.offsetTop`：元素相对于父元素的顶部偏移量。

`obj.scrollWidth`：获取对象的滚动宽度。

`obj.scrollHeight`：获取对象的滚动高度。

`obj.scrollLeft`：设置或获取位于对象左端滚动的距离。

`obj.scrollTop`：设置或获取位于对象顶端滚动的距离。

而在jQuery中，我们可以使用以下方法获取对象的相对高度和宽度：

`obj.offset().left`：元素相对于文档的左侧偏移量。

`obj.offset().top`：元素相对于文档的顶部偏移量。这是相对于整个文档的偏移量，而非其父元素。jQuery还提供了`scrollLeft()`和`scrollTop()`方法，用于设置或返回对象相对滚动条左侧的偏移和顶部的偏移。

原生JavaScript和jQuery在获取浏览器及页面元素宽高方面都有各自的优势和特色。在实际开发中，我们可以根据具体需求和场景选择使用哪种方式。希望本文能对你有所帮助，如果你有任何疑问或建议，欢迎随时与我们交流。