純 JavaScript 中 jQuery 的 .height() 和 .width() 的等價物是多少？
[英]What is the equivalent of .height() and .width() of jQuery in pure JavaScript?
問題描述
是否有任何等效的跨瀏覽器 API 用於獲取不包括邊框大小、填充和邊距的內容高度和寬度？ 我沒有使用 jQuery 的選項。
編輯：忘了提，我也必須支持 IE 8。
7 個解決方案
解決方案1
5 已采納 2015-02-21 08:18:06
好吧，我設法找到了解決方案。 對於除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 ，它也將以%返回。
所以問題仍然存在，我們需要一種從百分比轉換為像素值的方法。 有一個黑客從院長愛德華茲解決這個問題。 謝謝他！
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;
};
因此，最后使用hack查找內容寬度（計算高度的邏輯除了查詢高度而不是寬度）的跨瀏覽器解決方案如下：
假設我們有一個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');
}
解決方案2
3 2019-09-19 12:18:23
根據http://youmightnotneedjquery.com/它是
parseFloat(getComputedStyle(el, null).height.replace("px", ""))
和
parseFloat(getComputedStyle(el, null).width.replace("px", ""))
適用於 IE9+。
解決方案3
1 2015-02-19 12:12:44
通常是offsetWidth和offsetHeight。
解決方案4
1 2015-02-19 12:15:29
document.getElementById("elemID").clientWidth;
document.getElementById("elemID").clientHeight;
這里elemID是元素ID
解決方案5
0 2015-02-19 12:12:58
是的，有innerWidth和innerHeight。
所以像
var obj = document.getElementById('idhere');
var width = obj.innerWidth...
解決方案6
0 2015-02-19 12:33:59
使用此document.getElementById（“elementID”）。style.height;
解決方案7
0 2022-08-20 10:01:40
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.沒有滾動條（溢出隱藏在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可以。
純 JavaScript 相當於 JQuery $(this)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
純 JavaScript 相當於 JQuery $(this)
Javascript 等效於.width() 和.height()
純javascript相當於jquery click（）？
Javascript 等效於 jquery width()
Javascript / jQuery純JavaScript等效代碼
純JavaScript“自定義函數”相當於$ jQuery
純 JavaScript 中等效的 jQuery 動畫函數
純/本機javascript中這段代碼的等價物是什么？
什么是Jquery中此javascript的等效項
如何使用純 JavaScript 根據寬度調整 div 高度
相關標簽