我的CSS阻止了我的jQuery执行DOM更改

Question

我无法使我的输入文本变成红色，一旦jQuery填充跨度已达到其宽度限制。我正在使用此输入框来填充固定宽度PDF单元格，因此我将DIV格式化为PDF中输出的同一字体，大小和重量，我知道PDF单元的固定宽度为226。

请附加http://jsfiddle.net/q5hdl/6/fiddle。当我的CSS发表评论时，文字颜色变成红色，但在不受调的情况下未能变成红色。

P.S。这是我的第一个小提琴。

jQuery Code（如上所述，与CSS评论效果很好）

    $(document).ready(function(){
        $('#custName').keyup(function(){
            var desc = $(this).val();
            var cache = $(this);
            $('#arial12B').html(desc).promise().done(function(){
                if($('#arial12B').width() > 226){
                    cache.css("color", "#ff0000");
                }
            });
        });
    }); 

html代码

    <div id="inputSetBottomLeft">
        <input id="custName" name="custName" type="text" class="custInput" value="' . $customerName . '" />
        <div id="custNameHidden">
            <span id="arial12B">Some test text</span>
        </div>
    </div>

CSS代码

    .custInput{
        font-family: 'Open Sans', sans-serif;
        color:#cccccc;
        width:228px;
        font-size:12px;
        padding:8px 12px;
        border:1px solid #cccccc;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        -o-border-radius:3px;
     }
    .custInput:focus{
        color:#4c4c4c;
        border:1px solid #9ad065;
    }
    #custNameHidden{
        display:block;
        width:226px;
        background-color:#cccccc;
    }
    #arial12B{
        font-family:Arial;
        font-size:12px;
        font-weight:bold;
    }

预先感谢。

Answer 1

这将在所有浏览器中起作用：

演示JSFIDDLE

$(document).ready(function () {
    $('#custName').keyup(function () {
        var desc = this.value;
        var cache = $(this);
        $('#arial12B').html(desc);
        if ($('#arial12B').width() > 226) {
            cache.attr("style", "color:#ff0000 !important");
        }
    });
});