Question

我的网站上有一个进度条，这是其css的一部分：

.progress-bar span {
    display: inline-block;
    height: 25px;
    width: 78%; //the actual position

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

   //other css
}

我必须更改指示进度位置的宽度（您看到的行here）。这是我第一次使用进度条，我不知道如何设置javascript代码。

有什么建议吗？ jsfiddle

Answer 1

以下是without jQuery

的方式

HTML

<div  class="progress-bar" align="left">
    <span id="prog"></span>
</div>

JS：

var elem = document.getElementById("prog");
elem.style.width = "88%";

Answer 2

我建议使用jQuery让你的javascript调用更简单。您可以在此处下载最新版本：http://jquery.com/download/

首先，将jQuery文件包含在html的头部，如下所示：

<head>
...
<script type="text/javascript" src="<location of file>jquery-1.10.2.min.js"></script>
...
</head>

然后在您自己的javascript代码中，您可以移动进度条的位置，如下所示：

jQuery('.progress-bar scan').css('width', <desired width>);

希望这有帮助。

Answer 3

您可以使用：

document.querySelectorAll('.progress-bar span').forEach(function(elem) {
    elem.style.width = '<YOUR WIDTH>'; 
});

没有jQuery

Answer 4

我只是以这种方式增加了宽度：

function increment(){
var width = document.getElementById('progressbar').clientWidth;
var divArray = document.getElementById('progressbar');
if(width<500){
var largura = width+10;
divArray.style.width = largura+'%';
setTimeout("increment()",1000);
}
else{
window.location.href = "http://www.google.com/";
}
}

并且它每秒都会这样做，所以它会每秒递增一次，但你可以按你想要的方式改变它。

使用javascript增加HTML进度条位置

4 个答案: