使用 javascript 更改 HTML 表单

Question

我不知道如何用 javascript 确定表单的大小，以及如何更改它。我试过 element.style.width 但这不是为了阅读或写作。我也不知道我在调试器中寻找什么。 我需要根据 newNameNode 文本节点中文本的长度更改表单的宽度。

非常感谢您的帮助。

杰拉德

这是我的代码 -

<form name="Q1"  autocomplete="off">
<fieldset>
<legend>1</legend>
Ludwig Van Beethoven<br />
<input type="radio" name="Q1" value="1756-1819"><span>1756-1819</span><br>
<input type="radio" name="Q1" value="1770-1827,Beethoven,correct"><span> 1770-1827</span><br />
<input type="radio" name="Q1" value="1815-1858"><span> 1815-1858</span><br />
<input type="radio" name="Q1" value="1832-1870"><span> 1832-1870</span>
</fieldset>
</form> 

<script >
function buildForm() {

var newForm = document.createElement('form');
    newForm.name = "Q1";
    newForm.autocomplete = "off";

var newFieldset = document.createElement('fieldset');

var newNameNode = document.createTextNode('new text');
var br = document.createElement('br');
var newRadio = document.createElement('input');
    newRadio.type = 'radio';
    newRadio.name = 'Q1';
    newRadio.value = "new value";
var dates ="1770-1827";         
var newDateSpan = document.createElement('span');       
    newDateSpan.innerHTML = " " + dates + "<br />";
    console.log("newSpan.innerHTML: " + newDateSpan.innerHTML); //!!

var newLegend = document.createElement('legend');
    newLegend.innerHTML = newRadio.name;

newFieldset.appendChild(newLegend); 
newFieldset.appendChild(newNameNode);
newFieldset.appendChild(br);
newFieldset.appendChild(newRadio);
newFieldset.appendChild(newDateSpan);
newForm.appendChild(newFieldset);
document.body.appendChild(newForm);     
}
buildForm();
</script></body>
</html>

Answer 1

要确定高度/宽度，您要查找的是Element.scrollHeight 或Element.scrollWidth

您可以通过 CSS 设置宽度（这是更好的选择），或者通过 Javascript 中的 DOM 操作，如下所示：

  var forms = document.querySelectorAll('form');
  for (var i = 0; i < forms.length; i++) {
      forms[i].style.width = 250 + 'px';//sets the width of all forms to 250px
  }