使用javascript更改HTML表单

时间:2015-07-18 19:33:44

标签: javascript forms dom

我无法弄清楚如何使用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>

1 个答案:

答案 0 :(得分:0)

要确定身高/宽度,您要寻找的是Element.scrollHeightElement.scrollWidth

您可以设置CSS的宽度(这是更好的选项),或者通过Javascript中的DOM操作设置宽度,如下所示:

{'ingredient=' + $('#ingredient_selection option:selected').value() }