如何通过取消选中值来更改事件..

本文介绍了如何通过取消选中值来更改事件..的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<html>
<head></head>
<body>
    <table style="width:500px;height:400px;">
        <tr>
            <td>Font Family</td>
            <td>
                <select>
                    <option selected="selected">Select one.....</option>
                    <option>Calibri</option>
                    <option>Cambria</option>
                    <option>Verdana</option>
                    <option>Times New Roman</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Font Size</td>
            <td>
                <a href="">Small</a>
                <a href="">Normal</a>
                <a href="Larger">Large</a>
            </td>
        </tr>
        <tr>
            <td>Font Style</td>
            <td>
                <input type="checkbox" onclick="applyStyle2()" id>Bold
                <input type="checkbox" onclick="applyStyle()">Italic
                <input type="checkbox" onclick="applyStyle3()">Underline
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <span id="spn">This is a paragraph</span>
                <script type="text/javascript">
                    var x="";
                    function applyStyle(){
                        document.getElementById("spn").style.fontStyle="italic";
                    }
                    function applyStyle2(){
                        document.getElementById("spn").style.fontWeight="bold";
                    }
                    function applyStyle3(){
                        document.getElementById("spn").style.textDecoration="underline";
                    }
                    /*
                    function applyfontStyle(){
                        document.getElementById("span").style.fontStyle="italic";
                    }
                    */
                </script>
            </td>
        </tr>
    </table>
</body>
</html>

推荐答案

<input type="label" id="txtContent" value="RK"/>
<input id="chkbold" type="checkbox" onclick="applyStyle('b',this.id)">Bold
<input id="chkItalic" type="checkbox" onclick="applyStyle('i',this.id)">Italic
<input id="chkUnderline" type="checkbox" onclick="applyStyle('u',this.id)">Underline

Javascript函数：

Javascript function:

function applyStyle(styleOptn,chkbxID)
{
  var e = document.getElementById(chkbxID);
  var src= document.getElementById('txtContent');
  src.style.fontWeight = (e.checked && styleOptn == 'b') ? "bold": "";
  src.style.fontStyle = (e.checked && styleOptn == 'i') ? "italic": "";
  src.style.textDecoration = (e.checked && styleOptn == 'u') ? "underline": "";
}

根据您的要求更新解决方案：

Updated solution as per your requirement:

<select id="selectFontFamily" onchange ="changeFontFamily();">
                  <option selected="selected">Select one.....</option>
                  <option>Calibri</option>
                  <option>Cambria</option>
                  <option>Verdana</option>
                  <option>Times New Roman</option>
              </select>

Javascript函数：

Javascript function:

function changeFontFamily()
{
  var e = document.getElementById("selectFontFamily");
  var selectedValue = e.options[e.selectedIndex].value;
  var src= document.getElementById('txtContent');
  src.style.fontFamily = selectedValue;
}

干净又甜蜜;-)，你可以在这个网站上测试它 []

希望这对你有所帮助。

问候，

RK

Clean and sweet ;-), you could test it in this site http://jsbin.com/jotafaqu/5/[^]

Hope this helps you a bit.

Regards,
RK

<input type="checkbox" name="Bold" id="bld" onclick="applyStyle2()" ;Bold

                <input type="checkbox" name="italic" id="itl" onclick="applyStyle()">Italic
                <input type="checkbox" name="underline" id="ud" onclick="applyStyle3()">Underline

function applyStyle()
{
if(document.getElementById("itl").checked)
{
document.getElementById("spn").style.fontStyle="italic";
}
}

function applyStyle()
{
if(document.getElementById("bld").checked)
{
document.getElementById("spn").style.fontStyle="bold";
}
}

function applyStyle()
{
if(document.getElementById("ud").checked)
{
document.getElementById("spn").style.fontStyle="underline";
}
}

这篇关于如何通过取消选中值来更改事件..的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！