使用javascript更改HTML表单

我不知道如何使用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>

非常感谢你的帮助

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

杰拉德

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

这是我的密码-

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

1.
路德维希·范·贝多芬

1756-1819

1770-1827

1815-1858年

1832-1870
函数buildForm（）{
var newForm=document.createElement（'form'）；
newForm.name=“Q1”；
newForm.autocomplete=“关闭”；
var newFieldset=document.createElement（'fieldset'）；
var newNameNode=document.createTextNode（“新文本”）；
var br=document.createElement（'br'）；
var newRadio=document.createElement（'input'）；
newRadio.type='radio'；
newRadio.name='Q1'；
newRadio.value=“新值”；
var dates=“1770-1827”；
var newDateSpan=document.createElement（'span'）；
newDateSpan.innerHTML=“+dates+”
”；
console.log（“newSpan.innerHTML:+newDateSpan.innerHTML）；/！！
var newLegend=document.createElement（'legend'）；
newLegend.innerHTML=newRadio.name；
newFieldset.appendChild（newLegend）；
appendChild（newNameNode）；
newFieldset.appendChild（br）；
newFieldset.appendChild（newRadio）；
newFieldset.appendChild（newDateSpan）；
appendChild（newFieldset）；
document.body.appendChild（新格式）；
}
buildForm（）；

要确定高度/宽度，您要查找的是或

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

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

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

  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
  }

var forms=document.querySelectorAll（'form'）；
对于（var i=0；i

太好了，谢谢。这些是只读的，我需要写入什么属性才能更改它们？非常好，谢谢！我有一个后续问题。在div中放入表单之类的内容，并更改div的宽度而不是表单的宽度，这通常会更好吗？