0 
<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>12px</option>
        <option>18px</option>
        <option>24px</option>
    </select></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Send" onclick="Start()" /><input type="reset" value="Clear" /></td>
</tr>

因此，我想获取文本框文本，将其复制到这样的 varvar text = document.GetElementByID("pageh").value;中，然后document.write使用列表中选择的颜色和大小执行它。

4

1 回答 1

0

像这样的东西？

function Start() { 
    var text = document.getElementById('pageh').value; // get the value of the textbox
    var color_el = document.getElementById('hcolor');
    var color = color_el.options[color_el.selectedIndex].innerText.toLowerCase(); // get the selected color
    var size_el = document.getElementById('hsize');
    var size = size_el.options[size_el.selectedIndex].innerText; // get the font-size
    // make a p element with the selected style properties
    document.write("<p style='color: "+ color +"; font-size: " + size + "'>" + text + "</p>"); 
}

size_el.options和是选择标签中选项的color_el.options元素列表，size_el.selectedIndex和size_el.selectedIndex是被选择的选项，用整数表示。所以color_el.options[2]会给我们第三个选项元素。然后我们从元素中“提取”innerText。

最后我们创建一个段落元素，看起来<p style="color: gray; font-size: 24px">test</p>颜色应该最好用小写字母书写，因此我们使用 "Gray".toLowerCase() 将 "Gray" 转换为 "gray"

于 2012-12-18T16:21:53.940 回答