jquery - 我的 css 阻止我的 JQUERY 执行 DOM 更改

Question

一旦 jquery 填充的跨度达到它的宽度限制，我就无法让我的输入文本变成红色。 我正在使用此输入框来填充固定宽度的 PDF 单元格，因此我将 div 格式化为与将在 PDF 中输出相同的字体、大小和粗细，并且我知道 PDF 单元格的固定宽度为 226。

请附上http://jsfiddle.net/q5hdL/6/ fiddle 。当我的 css 被注释掉时文本颜色变成红色，但当取消注释时文本颜色不会变成红色。

附言这是我的第一把 fiddle 。

JQUERY 代码(如上所述，在 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

这将适用于所有浏览器:

DEMO 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");
        }
    });
});