Javascript HTML，我如何知道“文本框”的高度？_Javascript_Html

Javascript HTML，我如何知道“文本框”的高度？

javascript html

Javascript HTML，我如何知道“文本框”的高度？,javascript,html,Javascript,Html,我有一段html，如下所示： <!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; li

我有一段html，如下所示：

<!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>

使用JavaScript或Chrome/Firefox DevToolsF12，我如何知道文本行中文本框的确切高度像素数

textbox高度是由元素边框（HTML框模型中的边框）包围的区域的高度

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

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

设p=document.querySelector'.mypara' 让高度=window.getComputedStylep.fontSize 控制台高度身体{ 边际：0px；宽度：250px；边框：1px灰色虚线； } mypara先生{ 字体系列：SegeoUI；边际：0px；字体大小：24px；线高：120px；/*与线高相同：5*/ } 迈斯潘先生{ 边框：6px实心8f8； } .校准标记{ 位置：固定；边框顶部：1px实心ccc；边框底部：1px实心ccc；左：0px；宽度：250px；顶部：48px；高度：24px； }

我的段落

您也可以使用clientHeight

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

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

我将使用.getBoundingClientRect.height并去掉顶部和底部边框大小，因为它是硬编码的，每个边框大小为6，只需去掉12个即可-或者您可以使用getComputedStyle并根据需要获取计算值，如下所示

设e=document.querySelector'.myspan'；让css=window.getComputedStylee； console.log e、 getBoundingClientRect.height -parseFloatcss.borderTopWidth -parseFloatcss.borderBottomWidth ; 身体{ 边际：0px；宽度：250px；边框：1px灰色虚线； } mypara先生{ 字体系列：SegeoUI；边际：0px；字体大小：24px；线高：120px；/*与线高相同：5*/ } 迈斯潘先生{ 边框：6px实心8f8； } .校准标记{ 位置：固定；边框顶部：1px实心ccc；边框底部：1px实心ccc；左：0px；宽度：250px；顶部：48px；高度：24px； }

我的段落

如果我正确理解了你想做什么，这就行了

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

 </script>

高度不是28像素吗？根据firefox开发者工具，它是-您显示的是字体大小，这不是相同的EAPPORENT错误答案，window.getComputedStylep.fontSize返回24，这小于文本框高度。无论如何，您的代码是测量对齐元素-这与span元素无关Wow，这是正确和完美的答案。无论如何，我无法想象为什么有那么多自信的人给出了错误的答案。为了证明他们是对的还是错的，在电脑前只需花费不到一分钟的时间。@Jaromanda X上面的程序在Chrome开发者工具中显示了26。26在css中的位置是什么？答案是什么？我的意思是这个答案的结果是什么元素高度：29