html的元素高度如何计算,如何检索HTML元素的实际宽度和高度？

港控/mmm° 2022-10-10 11:20 164阅读 0赞

以防万一它是有用的人，我把一个文本框，按钮和DIV都具有相同的CSS ：

width:200px;

height:20px;

border:solid 1px \#000;

padding:2px;

我在Chrome，Firefox和ie-edge上试过它，我尝试过使用jquery而没有使用它，并且我尝试使用它并且没有使用box-sizing:border-box。总是与

结果：

Firefox Chrome IE-Edge

with w/o with w/o with w/o box-sizing

$("\#t").width() 194 200 194 200 194 200

$("\#b").width() 194 194 194 194 194 194

$("\#d").width() 194 200 194 200 194 200

$("\#t").outerWidth() 200 206 200 206 200 206

$("\#b").outerWidth() 200 200 200 200 200 200

$("\#d").outerWidth() 200 206 200 206 200 206

$("\#t").innerWidth() 198 204 198 204 198 204

$("\#b").innerWidth() 198 198 198 198 198 198

$("\#d").innerWidth() 198 204 198 204 198 204

$("\#t").css('width') 200px 200px 200px 200px 200px 200px

$("\#b").css('width') 200px 200px 200px 200px 200px 200px

$("\#d").css('width') 200px 200px 200px 200px 200px 200px

$("\#t").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("\#b").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("\#d").css('border-left-width') 1px 1px 1px 1px 1px 1px

$("\#t").css('padding-left') 2px 2px 2px 2px 2px 2px

$("\#b").css('padding-left') 2px 2px 2px 2px 2px 2px

$("\#d").css('padding-left') 2px 2px 2px 2px 2px 2px

document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206

document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200

document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206

document.getElementById("t").offsetWidth 200 206 200 206 200 206

document.getElementById("b").offsetWidth 200 200 200 200 200 200

document.getElementById("d").offsetWidth 200 206 200 206 200 206

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS--获取元素的高度与宽度

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN] 简介说明本文介绍如何使用JavaScript获取HT

港控/mmm°/ 2024年03月30日 12:24/ 0 赞/ 63 阅读

相关 vue如何获取一个元素的高度

Vue 中获取一个元素的高度可以使用 JavaScript 原生方法或者 Vue 内置的 $refs。 1. 使用 JavaScript 原生方法：可以在 mounte

喜欢ヅ旅行/ 2023年09月25日 16:03/ 0 赞/ 114 阅读

相关 UNI-APP_uni-app获取屏幕高度宽度、元素的高度宽度

uni.getSystemInfo(OBJECT) [官方文档][Link 1] 获取屏幕高度宽度 screenWidth 屏幕宽度 screenHe

矫情吗；*/ 2022年12月29日 06:53/ 0 赞/ 764 阅读

相关【VUE系列】获取元素宽度高度等

获取元素宽度给元素绑定个 ref 如 <div ref="divWidth">测试</div> 使用函数获取 //可以输出如下对象，查找到宽度cl

矫情吗；*/ 2022年10月15日 14:54/ 0 赞/ 295 阅读

相关 html的元素高度如何计算,如何检索HTML元素的实际宽度和高度？

以防万一它是有用的人，我把一个文本框，按钮和DIV都具有相同的CSS ： width:200px; height:20px; border:solid 1px \000;

港控/mmm°/ 2022年10月10日 11:20/ 0 赞/ 165 阅读

相关 java计算html高度,html获取网页高度、屏幕高度等js方法

s = " 网页可见区域宽：" document.body.clientWidth; s = " 网页可见区域高：" document.body.clientHeight;

朱雀/ 2022年10月10日 09:47/ 0 赞/ 405 阅读

相关 js中如何获取元素的高度

方法一：使用jquery $("\id").height(); 方法二：使用dom document.getElementById("id").style.

太过爱你忘了你带给我的痛/ 2022年07月16日 13:10/ 0 赞/ 520 阅读

相关 html、body元素的高度问题

首先：html元素和body元素均为块级元素。简述：有时我们会发现未设置height: 100%，html、body元素的高度却为当前窗口的高度，看上去像是设置了heigh

红太狼/ 2022年05月16日 15:24/ 0 赞/ 174 阅读

相关获取svg元素的高度和宽度（或其他属性）

下面给出了基于svg元素的js对象获取属性的方法（jqury对象可以转成js对象获取，主要关注点是svg同时支持以attribute的方式和style的方式来定义高度和宽度，但

比眉伴天荒/ 2022年05月16日 11:53/ 0 赞/ 274 阅读

相关顶部(左侧)元素固定高度(宽度)，内容(下方/右侧)元素撑满剩余高度(宽度)

最新更新时间：2019年08月12日10:42:15 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：css布局相关知识顶部

男娘i/ 2021年11月01日 15:54/ 0 赞/ 319 阅读