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>

そこで、テキストボックスのテキストを取得し、このような変数にコピーして、リストから選択した色とサイズでvar 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.optionsselect タグ内のオプションの要素リストです。size_el.selectedIndexとsize_el.selectedIndexは選択されたオプションで、整数で表されます。これcolor_el.options[2]により、3 番目のオプション要素が得られます。次に、要素から innerText を「抽出」します。

最後に段落要素を作成します。これは<p style="color: gray; font-size: 24px">test</p>、色を小文字で書くことが望ましいように見えるため、"Gray".toLowerCase() を使用して "Gray" を "gray" に変換します。

于 2012-12-18T16:21:53.940 に答える