javascript - 将 px 中的 .width() 转换为 jQuery 中的 %，以便在流畅时使用 Bootstrap 的附加标签

Question

我目前有:

j查询

$(document).ready(function () { 
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var wide = $(this).width(), /* create a variable that holds the width of the form */
            label = $(this).prev('.add-on').width(); /* create another variable that holds the width of the previous label */
        $(this).width( wide - label ); /* subtract the label width from the input width and apply it in px */
    });
});

html

<div class="input-prepend">
    <span class="add-on">Location</span>
    <input name="ctl00$ContentPlaceHolder1$tbLocation" type="text" id="tbLocation" class="span12 span-fix" placeholder="Location" style="width: 97.04668304668304%; ">
</div>

显示问题的 fiddle :http://jsfiddle.net/SuguM/

但是，这会应用以 px 为单位的新宽度，并且我使用的是流体布局，并且需要再次将其设为百分比。

有没有办法将应用于%的px转换成%？

Answer 1

事实上，您在计算中忽略了填充。我认为这段代码对您有帮助。

编辑:

这是 firefox 的代码:

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth();
        /* create another variable that holds the width of the previous label */
        $(this).width( (1-(label + $(this).outerWidth() - $(this).width())/$(this).parent().width()) *100 + "%" );
    });
});

这是 chrome 的代码:

$(document).ready(function () {
    $('.span-fix').each(function(){ /* Do this for each extended input */
        var label = $(this).prev('.add-on').outerWidth(); 
        /* create another variable that holds the width of the previous label */
        $(this).css("width", (1-(label)/$(this).parent().width()) *100 + "%" );
    });
});​

对于chrome，如果在检查width css属性时使用width方法，则必须设置属性css，该属性值不等于计算值。

jsFiddle 上有一个例子 here .

Here有两个实现的 jsFiddle。现在您只需要检测浏览器即可。