javascript - 获取和使用文本框文本并通过 html 选择框更改其颜色

Question

function Start(){
    var headerr = document.getElementById("pageh").value;
    var hcolor = document.getElementById("hcolor").value;
    var hsize = document.getElementById("hsize").value;

    document.body.innerHTML = "";
}

这是获取文本框和选择框值的 JS 代码。

<tr>
    <td>page header</td>
    <td>
        <input type="text" id="pageh" /></td>
</tr>
<tr>
    <td>Header color:</td>
    <td>
        <select id="hcolor">
            <option>red</option>
            <option>purple</option>
            <option>gray</option>
        </select></td>
</tr>
<tr>
    <td>Header size</td>
    <td>
        <select id="hsize">
            <option>small</option>
            <option>normal</option>
            <option>big</option>
        </select></td>
</tr>
<tr>
    <td></td>
    <td><input type="button" value="Send" onclick="Start()" /><input type="reset" value="Clear" /></td>
</tr>

以及文本框和选择框的 HTML 代码。那么我可以做些什么来发布文本并操纵它的颜色和大小呢？我考虑过使用 document.write(""headerr""); 但它似乎不起作用。

ETA JSFiddle：http: //jsfiddle.net/7LNMn/

谢谢！！

Answer 1

function Start(){
    var headerr = document.getElementById("pageh").value;
    var hcolor = document.getElementById("hcolor").value;
    var hsize = document.getElementById("hsize").value;

    var g = document.getElementById("header"); // var g will store document.getElementById("header") so, i don't have to write much whereas header can be changed by the element's id e.g. header of website!
    g.style.background = hcolor; // here g will get the element and style its bg
    g.style.fontSize = hsize; // here its fontSize
    // and I dont know what to do with pageh variable!
}