在纯JavaScript中，jQuery的.height(）和.width(）等价于什么

What is the equivalent of .height() and .width() of jQuery in pure JavaScript?

本文关键字：等价于 什么 width height JavaScript jQuery 在纯      更新时间：2024-01-14

是否有任何等效的跨浏览器API来获取不包括边框大小、填充和边距的内容高度和宽度？我没有使用jQuery的选项。

编辑：忘了提一下，我也得支持IE 8。

好吧，我已经设法找到了一个解决方案。对于除IE<9、Window.getComputedStyle()为救援Window.getComputedStyle()方法在应用活动样式表并解析这些值可能包含的任何基本计算之后，给出元素的所有CSS属性的值请参阅https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle了解更多详细信息。

IE 8及更早版本出现问题。其中CCD_ 3是CCD_。幸运的是IE拥有专有的currentStyle属性，我们可以从中检索内容width和height。遗憾的是，如果我们在样式表中的%中声明width，它也会在%中返回。

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

    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');
}

   document.getElementById("elemID").clientWidth;
   document.getElementById("elemID").clientHeight;

这里elemID是元素ID

根据http://youmightnotneedjquery.com/是

parseFloat(getComputedStyle(el, null).height.replace("px", ""))

和

parseFloat(getComputedStyle(el, null).width.replace("px", ""))

用于IE9+。

通常为offsetWidth和offsetHeight。

TL；DR: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。WITH滚动条（垂直和水平）

#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。NO滚动条（溢出隐藏在主体上）

#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帐户的滚动条，
原生CCD_ 26属性不，
然而html Element确实如此

是的，有innerWidth和innerHeight。

所以类似的东西

var obj = document.getElementById('idhere');
var width = obj.innerWidth...

使用此document.getElementById（"elementID"）.style.height；

相关文章：