JavaScript的文本框的文本接收發布和改變顏色

<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。JavaScript的文本框的文本接收發布和改變顏色

來源

2012-12-18 zarko

優秀變換「灰」到「灰」，究竟是什麼問題？ –

你能更具體嗎？ – ATOzTOA

我該怎麼做？點擊發送按鈕，然後啓動一個函數，該函數將使用hcolor和hsize中的選定屬性執行文本。 – zarko

像這樣？

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>顏色應最好與lowecase信寫的，所以我們用「灰色」 .toLowerCase（）

來源

2012-12-18 16:21:53 richie

令人驚歎！非常非常感謝你！請你補充一點解釋嗎？ – zarko

JavaScript的文本框的文本接收發布和改變顏色

回答

相關問題