进度条负值.css（宽度，）

Question

我搜索并研究了所有互联网的foruns ......但我没有找到解决方案......

我需要，这个：

<label> Name:
        <input type="text" id="name" name="name" required />
</label> 
<div class="container">
        <div class="progress progress-danger progress-striped active">
            <div class="bar" id="progBar" ></div> 
        </div>
    </div>  

所以，我希望当用户退出字段（onBlur）时，他会收到字符数量并返回为进度条的值，如果此参数为负数，则返回为进度条的值，只有消极，或者再次成为吧。

bar和JS的代码......

$(document).ready(function() {

$("*").blur(function() {
    var $bar = $("#progBar");
    var $name = $("name");

    if ($("#name").val().length > 2) {
        $bar.css('width', "30%");
    } else {
        $bar.css('width', "-30%"); //How, I do this????????
    }   

Answer 1

负宽度是什么意思？在css中，不允许使用负宽度。

在此处阅读或谷歌搜索。

http://www.css3.com/css-width/

  

CSS WIDTH

     

此属性指定元素的渲染框的宽度   块级和替换元素。不允许使用负值。

正宽度是一个属性，如果您要查找元素左侧的宽度，它不是负宽度，它的静止宽度，您可能有一个不同的元素来显示该宽度。

以下是您要找的内容。

JSFIDDLE

这适用于2个输入字段

if (($("#name").val().length > 2) && ($("#email").val().length>2)) {
    $('#positive').css('width','100%');
} else if($("#name").val().length > 2 || $("#email").val().length>2){
    $('#positive').css('width','50%');
} else{
    $('#positive').css('width','0%');
}

您可能还希望看到jquery ui的progressbar，

显示在这里的jsFiddle。

的 fiddle

Answer 2

您可以同时设置进度条的左边距和宽度，以便将其与负值一起使用。

看一下这个例子：

$(document).ready(function() {

  $("*").blur(function() {
    var $bar = $("#progBar");
    var $name = $("#name");

    if ($("#name").val().length > 2) {
        $bar.css('width', "30%").css("margin-left","50%");
    } else {
        var x=-30;
        $bar.css('width', Math.abs(x) + "%").css("margin-left", (50 + x) + "%");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label>Name: <input type="text" id="name" name="name" required /></label> 
<div class="container">
	<div class="progress">
		<div class="progress-bar progress-bar-danger active" id="progBar" role="progressbar" style="width:30%;margin-left:20%;"></div> 
	</div>
</div>