Question

我有一段这样的html：

private

如何通过JavaScript或Chrome / Firefox DevTools（F12）如何知道文本行文本框的确切高度（像素数）？

文本框高度是<!doctype html> <html> <head> <style type="text/css"> body { margin: 0px; width: 250px; border: 1px dashed gray; } .mypara { font-family: "Segeo UI"; margin: 0px; font-size: 24px; line-height: 120px; /* same as line-height:5 */ } .myspan { border: 6px solid #8f8; } .alignmark { position: fixed; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; left: 0px; width: 250px; top: 48px; height: 24px; } </style> </head> <body> <p class="mypara"><span class="myspan">My paragraph .</span></p> <div class="alignmark"></div> </body> </html>元素的 border （HTML框模型中的“ border”）包围的区域的高度。

根据我的实验，文本框高度和字体大小值之间的差异会因我选择的字体系列而异，有些可能是5〜6像素，有些可能7〜8像素。

Answer 1

我将使用.getBoundingClientRect().height并删除顶部和底部边框的大小（因为硬编码为6，每个边框仅删除了12-或可以使用getComputedStyle并根据需要获取计算值，如下所示））

let e = document.querySelector('.myspan');
let css = window.getComputedStyle(e);
console.log(
  e.getBoundingClientRect().height 
  - parseFloat(css.borderTopWidth) 
  - parseFloat(css.borderBottomWidth)
);

<!doctype html>
<html>
<head>
<style type="text/css">
body {
    margin: 0px;
    width: 250px;
    border: 1px dashed gray;
}
.mypara {
    font-family: "Segeo UI";
    margin: 0px;
    font-size: 24px; 
    line-height: 120px; /* same as line-height:5 */
}
.myspan { 
    border: 6px solid #8f8;
    
}
.alignmark {
    position: fixed;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    left: 0px; 
    width: 250px;
    top: 48px;
    height: 24px;
}
</style>
</head>
<body>
<p class="mypara"><span class="myspan">My paragraph .</span></p>

<div class="alignmark"></div>
</body>
</html>

Answer 2

使用Window.getComputedStyle()并访问其fontSize属性。

let p = document.querySelector('.mypara')
let height = window.getComputedStyle(p).fontSize

console.log(height)

<!doctype html>
<html>
<head>
<style type="text/css">
body {
    margin: 0px;
    width: 250px;
    border: 1px dashed gray;
}
.mypara {
    font-family: "Segeo UI";
    margin: 0px;
    font-size: 24px; 
    line-height: 120px; /* same as line-height:5 */
}
.myspan { 
    border: 6px solid #8f8; 
}
.alignmark {
    position: fixed;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    left: 0px; 
    width: 250px;
    top: 48px;
    height: 24px;
}
</style>
</head>
<body>
<p class="mypara"><span class="myspan">My paragraph .</span></p>

<div class="alignmark"></div>
</body>
</html>

Answer 3

您还可以使用clientHeight

let alignmark = document.getElementsByClassName('alignmark')[0];
console.log(alignmark.clientHeight);

或打开Chrome开发者工具，通过“元素”标签选择您的元素，然后单击“属性”。您还可以检查各种DOM属性。

Answer 4

如果我正确地理解了您想做什么，这将起作用。

 <script>
 window.onload = function(){
    console.log("Element Height:"+document.getElementById('myspan').offsetHeight);
 }

 </script>

HTML，我怎么知道“文本框”的高度？

4 个答案: