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

Question

我目前有：

jQuery

$(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>

显示问题的小提琴：http: //jsfiddle.net/SuguM/

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

有没有办法将 apply 转换px为 a %？

Answer 1

实际上，您在计算中省略了填充。我认为这段代码可以帮助你。

编辑 ：

这是火狐的代码：

$(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 的示例。

这里有两个实现的 jsFiddle。现在您只需要检测浏览器。

Answer 2

根据我之前的一篇文章。

var getPercent = function(elem) {
    var elemName = elem.attr("id"),
        width = elem.width(),
        parentWidth = elem.offsetParent().width(),
        percent = Math.round(100 * width / parentWidth);
    return percent;
};

Answer 3

这需要父母的宽度，只计算百分比。

$(this).width((wide - label)/$(this).parent().width()*100+'%');

Answer 4

这将计算整个文档的百分比：

$(this).width((wide - label) * 100 / $(document).width()+'%');