javascript - 如何将变量值分配给在 Javascript 中创建的 HTML 输入/如何在 Javascript 中设置 HTML 元素的样式

Question

这是我目前正在使用的代码。

function firstChildAge() {
  var header = document.createElement('H1');
  var body = document.getElementsByTagName('BODY');
  var textnode = document.createTextNode("WHAT IS THE AGE OF THE FIRST CHILD?");
  var inputChildOne = document.createElement("Input");
  header.appendChild(textnode);
  document.body.appendChild(header);
  document.body.appendChild(inputChildOne);
}

a) 我如何将变量值分配给用户创建的输入响应？

b) 如何在 Javascript 中设置元素样式？例如，如何制作文本“WHAT IS THE AGE OF FIRST CHILD?”红色，还是更改字体大小？

谢谢!!!

Answer 1

您可以使用检索输入框的当前字符串。

var val=document.getElementById('id of the input').value;//you can use any other element selection method too

设置你可以使用的颜色

document.getElementById('id of the tag').style.color='color name or hex';

你可以用它来设置一个元素的id

element.setAttribute("id", "uniqueIdentifier"); 

此外，textNode 没有样式属性，它们采用这样的父元素特征

var header = document.createElement('H1');
     var body = document.getElementsByTagName('BODY');
     var span = document.createElement('span');
     // Set DOM property
     span.style.color = 'red';
  span.appendChild(document.createTextNode('WHAT IS THE AGE OF THE FIRST CHILD'));

 // Add to document
 document.body.appendChild(span);

 var inputChildOne = document.createElement("Input");

 header.appendChild(textnode);
 document.body.appendChild(header);
 document.body.appendChild(inputChildOne);