sno*_*ket 837 html javascript xhtml dhtml
假设我有一个<div>我希望以浏览器的显示(视口)为中心.为此,我需要计算<div>元素的宽度和高度.
我该怎么用？请包含有关浏览器兼容性的信息
Gre*_*reg 1211
您应该使用.offsetWidth和.offsetHeight属性.注意它们属于元素,而不是.style.
var width = document.getElementById('foo').offsetWidth;
Zac*_*bey 185
看看Element.getBoundingClientRect().
该方法将返回包含一个对象width,height以及其他一些有用的值:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
例如:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
我相信这不会有问题,.offsetWidth并且.offsetHeight有时会返回它们0(正如这里的评论中所讨论的那样)
另一个区别是getBoundingClientRect()可以返回小数像素,其中.offsetWidth和.offsetHeight将舍入到最接近的整数.
IE8注意:IE8及以下版本getBoundingClientRect不会返回高度和宽度.*
如果必须支持IE8,请使用.offsetWidth和.offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
值得注意的是,此方法返回的Object实际上并不是普通对象.它的属性是不可枚举的(因此,例如,Object.keys它不能用于开箱即用.)
有关这方面的更多信息: 如何最好地将ClientRect/DomRect转换为普通对象
参考:
.offsetHeight:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth:https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect():https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRecttva*_*son 66
注意:这个答案是在2008年写的.当时最适合大多数人的跨浏览器解决方案实际上是使用jQuery.我将这里的答案留给后人,如果你使用的是jQuery,这是一个很好的方法.如果您正在使用其他框架或纯JavaScript,那么接受的答案可能就是您的选择.
作为jQuery的1.2.6可以使用的核心一个CSS功能,height和width(或outerHeight和outerWidth,如适用).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
Gra*_*ham 44
为了防止它对任何人有用,我把一个文本框,按钮和div都放在同一个css中:
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
我尝试使用chrome,firefox和ie-edge,我尝试使用jquery而没有,我尝试了它有没有box-sizing:border-box.永远与<!DOCTYPE html>
结果:
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
Har*_*rel 14
offsetWidth并offsetHeight返回"元素占用的总空间量,包括可见内容的宽度,滚动条(如果有),填充和边框"
clientWidth并clientHeight返回"实际显示的内容占用多少空间,包括填充但不包括边框,边距或滚动条"
scrollWidth并scrollHeight返回"内容的实际大小,无论当前有多少内容可见"
因此,这取决于预计测量的内容是否超出当前可视区域.
修改元素样式很容易，但读取值有点棘手。
\n\nJavaScript 无法读取来自 css（内部/外部）的任何元素样式属性 (elem.style)，除非您使用 JavaScript 中的内置方法调用 getCompulatedStyle。
\n\n\n\n\ngetCompatedStyle(元素[,伪])
\n
元素：要读取其值的元素。
\n伪:如果需要的话，伪元素，例如::before。空字符串或无参数表示元素本身。
结果是一个具有样式属性的对象，例如 elem.style，但现在针对所有 css 类。
\n\n例如，这里的样式\xe2\x80\x99看不到边距：
\n\n<head>\n <style> body { color: red; margin: 5px } </style>\n</head>\n<body>\n\n <script>\n let computedStyle = getComputedStyle(document.body);\n\n // now we can read the margin and the color from it\n\n alert( computedStyle.marginTop ); // 5px\n alert( computedStyle.color ); // rgb(255, 0, 0)\n </script>\n\n</body>\n因此修改了您的 javaScript 代码以包含您希望获取其宽度/高度或其他属性的元素的 getCompulatedStyle
\n\nwindow.onload = function() {\n\n var test = document.getElementById("test");\n test.addEventListener("click", select);\n\n\n function select(e) { \n var elementID = e.target.id;\n var element = document.getElementById(elementID);\n let computedStyle = getComputedStyle(element);\n var width = computedStyle.width;\n console.log(element);\n console.log(width);\n }\n\n}\n计算值和解析值
\n\nCSS中有两个概念：
\n\n\n\n\n计算出的样式值是应用所有 CSS 规则和 CSS 继承之后的值，作为 CSS 级联的结果。它可以看起来像 height:1em 或 font-size:125%。
\n\n已解析的样式值是最终应用于元素的样式值。\n 1em 或 125% 等值是相对的。浏览器采用计算出的\n值并使所有单位固定且绝对，例如：\n height:20px 或 font-size:16px。对于几何属性解析值\n可能有一个浮点，如宽度：50.5px。
\n
很久以前，创建 getCompulatedStyle 是为了获取计算值，但事实证明解析值要方便得多，并且标准发生了变化。
\n所以现在 getComputedStyle 实际上返回属性的解析值。
请注意：
\n\ngetCompatedStyle 需要完整的属性名称
\n\n\n\n\n您应该始终询问您想要的确切属性，例如 paddingLeft 或高度或宽度。否则无法保证正确的结果。
\n\n例如，如果有属性 paddingLeft/paddingTop，那么我们应该为 getCompulatedStyle(elem).padding 获取什么？什么都没有，或者\n可能是已知填充中的\xe2\x80\x9c生成的\xe2\x80\x9d值？这里没有标准规则。
\n
还有其他不一致之处。例如，某些浏览器 (Chrome) 在下面的文档中显示 10px，而其中一些浏览器 (Firefox) \xe2\x80\x93 则不显示：
\n\n<style>\n body {\n margin: 30px;\n height: 900px;\n }\n</style>\n<script>\n let style = getComputedStyle(document.body);\n alert(style.margin); // empty string in Firefox\n</script>\n欲了解更多信息https://javascript.info/styles-and-classes
\n您只需要为IE7和更早的版本（仅在您的内容没有固定大小的情况下）进行计算即可。我建议使用HTML条件注释来将黑客行为限制为不支持CSS2的旧IE。对于所有其他浏览器，请使用以下命令：
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
这是完美的解决方案。它可以居中对齐<div>任何大小，并将其收缩包装到其内容的大小。
| 归档时间： |
|
| 查看次数： |
958059 次 |
| 最近记录： |