Fatal编程技术网
  • javascript/
  • 使用javascript更改id宽度百分比

使用javascript更改id宽度百分比

javascript html css

使用javascript更改id宽度百分比,javascript,html,css,Javascript,Html,Css,我正在尝试编码一个百分比目标栏。我似乎无法更改javascript中的#条宽度百分比。有什么建议吗？？对不起，代码太乱了。我有理由选择-20*-1。我只需要集中精力更改id宽度百分比 CSS: .graph { width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */ height: 30px; border: 1px solid

我正在尝试编码一个百分比目标栏。我似乎无法更改javascript中的#条宽度百分比。有什么建议吗？？对不起，代码太乱了。我有理由选择-20*-1。我只需要集中精力更改id宽度百分比

CSS:

.graph {
  width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
  height: 30px;
  border: 1px solid #888; 
  background: rgb(168,168,168);
  position: relative;
}
#bar {
  height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
  width: 34%;
  float: left;
  background: rgb(255,197,120); 
  border-top: 1px solid #fceabb;
}

var _first = -20 * -1;
var _second = 150;
var _third = _first / _second * 100;
document.getElementById('bar').style.width = _third + "%";

<center><div id="progress" class="graph"><div id="bar"></div></div></center>
JS:

.graph {
  width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
  height: 30px;
  border: 1px solid #888; 
  background: rgb(168,168,168);
  position: relative;
}
#bar {
  height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
  width: 34%;
  float: left;
  background: rgb(255,197,120); 
  border-top: 1px solid #fceabb;
}

var _first = -20 * -1;
var _second = 150;
var _third = _first / _second * 100;
document.getElementById('bar').style.width = _third + "%";

<center><div id="progress" class="graph"><div id="bar"></div></div></center>
HTML:

.graph {
  width: 500px; /* width and height are arbitrary, just make sure the #bar styles are changed accordingly */
  height: 30px;
  border: 1px solid #888; 
  background: rgb(168,168,168);
  position: relative;
}
#bar {
  height: 29px; /* Not 30px because the 1px top-border brings it up to 30px to match #graph */
  width: 34%;
  float: left;
  background: rgb(255,197,120); 
  border-top: 1px solid #fceabb;
}

var _first = -20 * -1;
var _second = 150;
var _third = _first / _second * 100;
document.getElementById('bar').style.width = _third + "%";

<center><div id="progress" class="graph"><div id="bar"></div></div></center>
因为JS是在DOM准备就绪之前加载的，所以它找不到尚未加载的带有e id
条的
div
，您应该将代码放在
onload
函数中：


window.onload=function(){
    var _first = -20 * -1;
    var _second = 150;
    var _third = _first / _second * 100;

    document.getElementById('bar').style.width = _third + "%";
}



希望这能有所帮助。
因为JS是在DOM准备就绪之前加载的，所以它找不到带有e id
条的
div
尚未加载，您应该将代码放在
onload
函数中：


window.onload=function(){
    var _first = -20 * -1;
    var _second = 150;
    var _third = _first / _second * 100;

    document.getElementById('bar').style.width = _third + "%";
}



希望这有帮助。
您的代码是正确的。只是坏了。当JavaScript试图操纵DOM时，浏览器尚未创建DOM。有两种方法，下面是我的方法。我喜欢这种方式，因为不需要调用额外的函数来等待DOM的创建


<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <style>
        .graph {
            width: 500px;
            height: 30px;
            border: 1px solid #888; 
            background: rgb(168,168,168);
            position: relative;
        }
        #bar {
            height: 29px;
            width: 34%;
            float: left;
            background: rgb(255,197,120); 
            border-top: 1px solid #fceabb;
        }
    </style>
    <!-- The HTML needs to come before the JavaScript. That way
          the DOMS are created for the JavaScript  -->
    <center>
        <div id="progress" class="graph">
            <div id="bar"></div></div>
    </center>

    <script>
        var _first = -20 * -1;
        var _second = 150;
        var _third = _first / _second * 100;
        document.getElementById('bar').style.width = _third + "%";
    </script>
</body>
</html>




.图表{
宽度：500px；
高度：30px；
边框：1px实心#888；
背景：rgb（168168168）；
位置：相对位置；
}
#酒吧{
高度：29px；
宽度：34%；
浮动：左；
背景：rgb（255197120）；
边框顶部：1px实心#fceabb；
}
var _first=-20*-1；
var_秒=150；
var _third=_first/_second*100；
document.getElementById（'bar'）。style.width=_third+“%”；

您的代码是正确的。只是坏了。当JavaScript试图操纵DOM时，浏览器尚未创建DOM。有两种方法，下面是我的方法。我喜欢这种方式，因为不需要调用额外的函数来等待DOM的创建


<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <style>
        .graph {
            width: 500px;
            height: 30px;
            border: 1px solid #888; 
            background: rgb(168,168,168);
            position: relative;
        }
        #bar {
            height: 29px;
            width: 34%;
            float: left;
            background: rgb(255,197,120); 
            border-top: 1px solid #fceabb;
        }
    </style>
    <!-- The HTML needs to come before the JavaScript. That way
          the DOMS are created for the JavaScript  -->
    <center>
        <div id="progress" class="graph">
            <div id="bar"></div></div>
    </center>

    <script>
        var _first = -20 * -1;
        var _second = 150;
        var _third = _first / _second * 100;
        document.getElementById('bar').style.width = _third + "%";
    </script>
</body>
</html>




.图表{
宽度：500px；
高度：30px；
边框：1px实心#888；
背景：rgb（168168168）；
位置：相对位置；
}
#酒吧{
高度：29px；
宽度：34%；
浮动：左；
背景：rgb（255197120）；
边框顶部：1px实心#fceabb；
}
var _first=-20*-1；
var_秒=150；
var _third=_first/_second*100；
document.getElementById（'bar'）。style.width=_third+“%”；

上面显示了什么？您是否尝试将
脚本
代码移动到HTML的末尾？我认为
文档.getElementById
没有找到
#bar
元素。不过，我建议将其放入加载事件或其他内容中。您需要在html之后移动脚本，因为在您尝试使用id栏获取div时，它尚未呈现。如果脚本在html部分之后执行，则可以使用此功能：将
标记移到末尾，或者使用jQuery和
$（document）.ready（）
上面显示了什么？您是否尝试将
脚本
代码移动到HTML的末尾？我认为
文档.getElementById
没有找到
#bar
元素。不过，我建议将其放入加载事件或其他内容中。您需要在html之后移动脚本，因为在您尝试使用id栏获取div时，它尚未呈现。如果脚本在html部分之后执行，则可以使用此功能：将
标记移到末尾，或者使用jQuery和
$（document）.ready（）
我就知道会是这样。新手犯的错误。谢谢不客气，巴尼科拉斯。请支持我的回答：）我就知道会是这样。新手犯的错误。谢谢不客气，巴尼科拉斯。请投票表决我的答案：）