使用jquery更改标签的颜色?

时间:2012-08-04 14:29:37

标签: jquery html submit label

我想在按钮上单击

将标签的颜色更改为红色

但是代码不能正常工作似乎一切正确

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>
    </title>
    <script type="text/javascript">
    function changeColor(id, newColor) {

var labelObject = document.getElementById(id);

$("#" + id).css("color", newColor);

}
    </script>
</head><body>
<form id="frm2">

<label for="model">Male</label>

<input type="text" name="cars" id="model" />

<br />

<label for="female">Female</label>

<input type="text" name="cars" id="color" />

</form>

<input type="button" value="Change Label Color" onclick="return changeColor('label', 'red')" />

    </body>
</html>

请帮忙

3 个答案:

答案 0 :(得分:10)

您将'label'作为changeColor处理程序的id参数传递,但您提供的HTML中没有包含该ID的元素。您需要在标签中添加一些ID,并在onclick处理程序中传递这些ID。例如:

<label for="model" id="label1">Male</label>
<input type="text" name="cars" id="model" />

<input type="button" value="Change Label Color" onclick="return changeColor('label1', 'red')" />

另一种方法是传递输入元素的ID,因为它们已经分配了ID。然后,您需要修改changeColor处理程序,如下所示:

function changeColor(inputId, newColor) {
  $("#" + inputId).prev().css("color", newColor);
}

修改:这是jsFiddle,展示了我的第二个例子。

答案 1 :(得分:6)

$('input[type="button"]').click(function(){
     changeColor('labelCity' , 'red');
}); 

function changeColor(id, newColor) {

   $("#" + id).css("color", newColor);

}  

答案 2 :(得分:2)

这是一个使用jQuery将标签文本的颜色更改为红色的简单示例。

    <script src="Scripts/jquery-1.9.0.min.js"></script>
    <script>

        $(document).ready(function () {
            $('#btnChangeColor').click(function () {
                $('#lbl1').css("color", "red");
            })
        })

        
    </script>
<body>
    <form id="form1" runat="server">

        <label id="lbl1" >Hello friends save girl child</label>
        <br /><br /><br />

        <input type="button" id="btnChangeColor" value="Change Color" />

    </form>
</body>