更改javascript更改功能的结果颜色

时间:2016-03-30 18:56:15

标签: javascript

我有这个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>

2 个答案:

答案 0 :(得分:1)

您只需根据其值更改输入元素的CSS:

SELECT C.CustID, C.Name
FROM Customer C
JOIN ( SELECT CustID
       FROM Products
       GROUP BY CustID
       HAVING COUNT(CASE WHEN Item = 'Toaster' THEN 1 END) > 1 
          AND COUNT(CASE WHEN item = 'Breadbox' THEN 1 END) = 0 
     ) P   -- Get customer with at least one Toaster and not Breadbox
  ON C.CustID = P.CustID
JOIN ( SELECT CustID
       FROM Returns 
       HAVING COUNT(*) < 2
     ) R   -- Get only customers with less than 2 returns
  ON C.CustID = R.CustID

如果值为if( $("#Rating").val() == 'M' ) $("#Rating").css({'color':'red', 'font-weight': 'bold'}); else $("#Rating").css('color','black'); ,则会使文本变为红色和粗体,否则会使颜色变黑。如果您希望'M'值不加粗,也可以在font-weight: normal上设置else

答案 1 :(得分:0)

如果要在验证某些内容后更改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/