我搜索研成foruns，所有的互聯網的......但我不發現它的解決方案...進度條與負值的.css（寬度）

我需要的，這樣的：

<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），他收到的字符量並返回爲進度條的值，如果這個參數是負數，返回的值進度條，只有負面的，或再次是酒吧。

酒吧和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???????? 
    }

來源

2013-08-04 Bruno Casali

你說的負寬度是什麼意思？在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的用戶界面的progressbar，

一個的jsfiddle顯示出在這裏。

fiddle

來源

2013-08-04 05:20:18

其實這就是答案，你不能有負值，你可以做這樣的事情，雖然，http://jsfiddle.net/ybPzP/14/ –

並使用漸變如果你想它填充30％。 –

但是，我想，這... [Register Galk HTML5]（http://register.galk.me/）你怎麼看？ @Optimus Prime –

您可以設置，兩者左邊距和進度，以負值使用它的寬度。

看看這個例子：

$(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"> 
 
\t <div class="progress"> 
 
\t \t <div class="progress-bar progress-bar-danger active" id="progBar" role="progressbar" style="width:30%;margin-left:20%;"></div> 
 
\t </div> 
 
</div>

來源

2017-10-25 13:00:43

進度條與負值的.css（寬度）

回答

CSS WIDTH

JSFIDDLE

fiddle

相關問題