更改javascript更改函数结果的颜色

Change color of results of a javascript change function

本文关键字：结果 颜色 函数 javascript 更改      更新时间：2023-10-05

我有这个javascript函数，我唯一不知道如何在输入文本中设置M为粗体红色，L为黑色，因为它是M或L。我如何在输入中为结果着色？这是完整的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://code.jquery.com/jquery-1.2.3.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
   <tr>  
        <td align="center"><input type="checkbox" name="Shared" id="Shared" value="YES" /></td>
        <td align="center"><input type="checkbox" name="One" id="One" value="YES" /></td>
        <td align="center"><input type="checkbox" name="Two" id="Two" value="YES" /></td>
        <td align="center"><input type="checkbox" name="Three" id="Three" value="YES" /></td>
        <td align="center"><input type="checkbox" name="Four" id="Four" value="YES" /></td>
        <td align="center"><input type="checkbox" name="Five" id="Five" value="YES" /></td>
        <td align="center"><input type="checkbox" name="Six" id="Six" value="YES" /></td>
        <td align="center"><input type="text" name="Rating" id="Rating" value="" class="inputtext5" readonly="readonly" /></td>
        <script type="text/javascript">
        $('#Shared, #One, #Two, #Three, #Four').change(function() {
            $("#Rating").val(( ( $('#Shared').is(':checked') && $('#One').is(':checked') && $('#Two').is(':checked')) | ($('#Three').is(':checked') | $('#Four').is(':checked')) ) ? "M" : "L");
        });             
        </script>
  </form>              
 </tr>
</table>      
</body>
</html>

您可以简单地根据其值更改输入元素的CSS：

if( $("#Rating").val() == 'M' ) 
    $("#Rating").css({'color':'red', 'font-weight': 'bold'});
else 
    $("#Rating").css('color','black');

如果值为'M'，这将使文本变为红色和粗体，否则将使颜色变为黑色。如果希望'L'的值不为粗体，也可以在else上设置font-weight: normal。

如果您想在验证某些内容后更改HTML元素的颜色或样式，Jquery允许社区使用名为.css（）的属性来更改它们。.css（。

示例：

<!--HTML CODE-->
<input type="button" id="clickme" value="Click on me for change my backgroundcolor">
<!--Jquery code-->
<script type="text/javascript">
$(document).ready(function({
    $('#clickme').click(function() {
        $('#clickme').css({
        'background-color':'#000',
        'color':'#fff'
        });
        $('#clickme').attr('value','My background color is changed');
    });
});
</script>

如果您想了解更多信息，请参阅以下参考资料：http://api.jquery.com/css/

相关文章：