logo标签列表

在纯JavaScript中，与jQuery的.height()和.width()等效的是什么？

javascriptjquery
21
有没有等效的跨浏览器API可以获取内容的高度和宽度，但不包括边框大小、填充和外边距？我不能使用jQuery。
编辑：忘了提到，我还必须支持IE 8。
2
我没有使用jQuery的选项。啊，好的，但是为什么我看到了jQuery标签呢？ - nicael
即使 jQuery 也是纯JavaScript。你可能想表达的是“使用本地DOM API”，虽然它大多遵循跨浏览器的通用标准，但并不保证所有部分都能跨浏览器正常工作。 - sarveshseri
6
@nicael - 为了接触到熟悉“jQuery实现方式”的人。 - Md. Arafat Al Mahmud
@SarveshKumarSingh - 是的 - Md. Arafat Al Mahmud
7个回答
11

好的，我已经找到了解决办法。对于IE<9以外的浏览器，Window.getComputedStyle()是拯救者。Window.getComputedStyle()方法会返回元素应用活动样式表后所有CSS属性的值，并解析这些值所包含的任何基本计算。有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle。

问题出现在IE 8及之前版本中。在这些版本中，getComputedStyle为undefined。幸运的是，IE有专有的currentStyle属性，可以从中检索内容的width和height。遗憾的是，如果我们在样式表中使用%定义width，它也将返回%。

因此，问题仍然存在，我们需要一种将百分比转换为像素值的方法。这个问题有一个来自Dean Edwards的hack可以解决。感谢他！

    var PIXEL = /^\d+(px)?$/i;
    function getPixelValue(element, value) {
        if (PIXEL.test(value)) return parseInt(value);
        var style = element.style.left;
        var runtimeStyle = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft;
        element.style.left = style;
        element.runtimeStyle.left = runtimeStyle;
        return value;
    };

因此，以寻找内容宽度为例的跨浏览器解决方案(计算高度的逻辑相同，只需使用高度查询而非宽度)如下所示：

假设我们有一个id为'container'的div。其宽度在样式表中设置为50%。

 <style type="text/css">

    #container {
        width: 50%;
        padding: 5px;
    }

  </style>

测试JavaScript代码：

var container = document.getElementById('container');
if (window.getComputedStyle) {
      var computedStyle = getComputedStyle(container, null)
      alert("width : "+computedStyle.width);
} else {
      alert("width : "+getPixelValue(container,container.currentStyle.width)+'px');
}
如果我的目标受众是中国，我甚至不会费心支持IE8及更早版本。 - Adam Leggett
1
对于任何试图使用此代码但得到 NaN 的人：getComputedStyle 将返回未（尚未）呈现的元素的 auto。听起来很明显，但这当然包括 display=none 或者如果宽度设置为 auto 或者该元素是内联元素。 - Koert van Kleef
当 box-sizing: border-box; 存在时，情况就不一样了。 - T S
7
   document.getElementById("elemID").clientWidth;
   document.getElementById("elemID").clientHeight;

在这里，elemID 是元素的ID。
3
它包括在计算中考虑填充。 - Md. Arafat Al Mahmud
如果元素没有填充，这个功能就完美运作了。 - OZZIE
4
根据http://youmightnotneedjquery.com/，它是： parseFloat(getComputedStyle(el, null).height.replace("px", ""))
和 parseFloat(getComputedStyle(el, null).width.replace("px", ""))
适用于IE9+。
当 box-sizing: border-box; 存在时，情况很遗憾不同。 - T S
1

简而言之：jQuery(window) 的等效写法：

宽度： jQuery(window).width() => document.querySelector('html').clientWidth
或者 document.body.clientWidth（没有水平滚动条）

高度： jQuery(window).height() => document.querySelector('html').clientHeight

在重写旧的jQuery代码时，我做了一些测试，并想提到与$(window)等效的内容，它并不总是等于window.clientWidth/Height！

window尺寸示例（开发者工具已打开）

（在Chrome（v104）中打开的页面示例）

A.带有滚动条（垂直和水平）

#HTMLElement == document.querySelector('html')

          width                   |              height
jQuery(window).width():    1905   |   jQuery(window).height():      509
document.body.clientWidth: 1905   |   document.body.clientHeight: 14000
#HTMLElement.clientWidth:  1905   |   #HTMLElement.clientHeight:    509 // EQUAL to jQuery
window.innerWidth:         1920   |   window.innerHeight:           524
window.outerWidth:         1920   |   window.outerHeight:          1055

B. 没有滚动条（在body上隐藏溢出）

#HTMLElement == document.querySelector('html')

          width                   |              height
jQuery(window).width():    1920   |   jQuery(window).height():      524
document.body.clientWidth: 1920   |   document.body.clientHeight: 14000
#HTMLElement.clientWidth:  1920   |   #HTMLElement.clientHeight:    524 // still $ equal
window.innerWidth:         1920   |   window.innerHeight:           524 // only without SB
window.outerWidth:         1920   |   window.outerHeight:          1055

现在为什么要在那里包含<html>元素？这是因为其他宽度/高度源不反映来自jQuery的值，因为它们没有考虑滚动条。

核心区别

jQuery考虑了滚动条，
本地window属性不考虑，
然而html Element会考虑。

如果您仅仅是为了获取宽度/高度而使用 $w 代替 $(window)，那么这个代码段可以作为替代方案：const htmlEl = document.querySelector('html'); const $w = { width: () => htmlEl.clientWidth, height: () => htmlEl.clientHeight }; 然后您可以调用 $w.width() / $w.height() 来获得与 jQuery 相同的效果 :-) - jave.web
另外，$(document.querySelector('html')).scrollTop() 相当于 jQuery 的 $(window).scrollTop() ；-) - jave.web
1
通常指的是offsetWidth和offsetHeight。
2
它将边框大小和填充包括在宽度计算中。 - Md. Arafat Al Mahmud
-1
使用此代码

document.getElementById("elementID").style.height;

可以获取元素的高度。
7
只有在我之前设置了样式值，这才有意义。但这是没有意义的，因为如果我早已设置了它，那么我为什么还需要查询呢？ - Md. Arafat Al Mahmud
-1

是的，有innerWidth和innerHeight。

所以类似于

var obj = document.getElementById('idhere');
var width = obj.innerWidth...
Internet Explorer 8 会因此失败。 - Sharky
2
那么Internet Explorer 7、6、5、4、3也是如此。 - peterpeterson
2
innerWidth 只对 window 对象有效。在像 div 这样的常规 DOM 元素上，它是未定义的。 - Md. Arafat Al Mahmud
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接