Question

我有这个

<h2 id="caption">Hello World</h2>
<select name="font" id="Font">
            <option onClick="document.getElementById('caption').style.fontFamily = 'courier';" value="courier">Courier</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'georgia';" value="georgia" >Georgia</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'palatino';" value="palatino">Palatino Linotype</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'times';" value="times">Times New Roman</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'arial';" value="arial">Arial</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'comic';" value="comic">Comic Sans</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'impact';" value="impact">Impact</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'lucida';" value="lucida">Lucida Console</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'trebuchet';" value="Trebuchet">Trebuchet</option>
            <option onClick="document.getElementById('caption').style.fontFamily = 'tahoma';" value="tahoma">Tahoma</option>
            </select>

这不会改变fontstyle ,, 怎么了？

Answer 1

下拉选项不响应onclick（）。你需要使用onchange（）。代码是：

<h2 id="caption">Hello World</h2>
<select name="font" id="Font" onchange="document.getElementById('caption').style.fontFamily = document.getElementById('Font').value;">
        <option value="courier">Courier</option>
        <option value="georgia" >Georgia</option>
        <option value="palatino">Palatino Linotype</option>
        <option value="times">Times New Roman</option>
        <option value="arial">Arial</option>
        <option value="comic">Comic Sans</option>
        <option value="impact">Impact</option>
        <option value="lucida">Lucida Console</option>
        <option value="trebuchet">Trebuchet</option>
        <option value="tahoma">Tahoma</option>
</select>

Answer 2

<div>
    <ul id="ul_tipoItems" style="font-family: <?php echo $tipoItems;?>;">
        <select id="itemsText" name="cmb_tipografiaItems" onchange="javascript:document.getElementById('ul_tipoItems').style.fontfamily=document.getElementById('itemsText').value;">
            <option value="arial" <?php if ($tipoItems == 'arial'){ echo "selected";}?>>Arial</option>
            <option value="courier new" <?php if ($tipoItems == 'courier new'){ echo "selected";}?>>Courier</option>
            <option value="georgia" <?php if ($tipoItems == 'georgia'){ echo "selected";}?>>Georgia</option>
            <option value="times new roman" <?php if ($tipoItems == 'times new roman'){ echo "selected";}?>>Times new roman</option>
            <option value="trebuchet ms" <?php if ($tipoItems == 'trebuchet ms'){ echo "selected";}?>>Trebuchet MS</option>
            <option value="verdana" <?php if ($tipoItems == 'verdana'){ echo "selected";}?>>Verdana</option>
        </select>  << Asi luce un texto con tipografia >>
    </ul>
</div>

下拉列表中的onclick / onchange

2 个答案: