изменение формы HTML с помощью javascript

Question

Я не могу понять, как размер формы можно определить с помощью javascript и как ее изменить. Я пробовал element.style.width, но это не делается ни для чтения, ни для записи. Я не знаю, что я ищу в отладчике. Мне нужно изменить ширину формы в зависимости от длины текста в текстовом узле newNameNode.

Большое спасибо за любую помощь.

Gerard

Вот мой код -

<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 (это лучший вариант) или манипулированием DOM в Javascript, следующим образом:

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 
    }