如何使用JavaScript获取HTML文本区域内的文本宽度和高度?

编辑:

var fontSize = 12;
var widthTest = document.getElementById("widthTest");
widthTest.style.fontSize = fontSize;
var height = (widthTest.clientHeight + 1) + "px";
var width = (widthTest.clientWidth + 1) + "px"

console.log(height, width);

#widthTest
{
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap; 
}

<div id="widthTest">
    FooBarEatsBarFoodBareFootWithBarFoo
</div>

如果您想要某个元素的宽度,则使用 javascript语言 你可以这样做:

document.getElementById("myTextArea").offsetWidth

或

document.getElementById("myTextArea").clientWidth

信息:

offsetWidth包含边框宽度,clientWidth不包含边框宽度

 <textarea id="myTextArea" style="width:450px;"></textarea>

如果你想得到 棱角分明的 部件代码:

someComponent.html:

 <textarea #myTextAreaRef style="width:450px;"></textarea>

部分组件.ts:

export class SystemComponent implements OnInit {

   @ViewChild('myTextAreaRef') public myTextAreaRef;
   ...
   ..

   someFunction() {
      console.log(this.myTextAreaRef.nativeElement.someAttribute)
   }