Question

大家好！

我到处都在寻找解决方案，但还没有完全找到我要寻找的东西。

我的问题

每次单击按钮时，我都试图增加Div的宽度。我所拥有的只是我的DIV元素，我想增加它的价值。我只需要知道如何增加它。

这是我的代码： https://codepen.io/keanubarnardd/pen/XyXQZE?editors=1010

我尝试过的发现

进行自己的研究时，我发现的是：

使用此方法：document.getElementById('example').style.width="400px";尽管会改变宽度-这不是我要实现的目标，因为我想为每次点击增加一定的幅度。

Answer 1

使用

var widthElem= document.getElementById('rough-in-bar').offsetWidth;

获取当前的width并添加新的width

document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'

为防止灰色部分溢出，您可以使用：

   if(widthElem<document.getElementById('rough-in-progress').offsetWidth-10)
     document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'

    //Data
    var roughInTotal = 0;

    //Text
    var roughInText= document.getElementById("rough-in-total");

    //UI Objects
    var roughInButton = document.getElementById("rough-btn");

    var roughInBar = document.getElementById("rough-in-bar");

    roughInButton.addEventListener("click",function(){
        addHour(1, roughInText);
    });
    //Set everything on our website
    roughInText.textContent =  roughInTotal + " hours";


     function addHour( addAmount, textToChange) {
        //Add the amount of hours worked...
        roughInTotal += addAmount;
        //Update our text to be displayed
        textToChange.textContent = roughInTotal + " hours worked";
        //Print how much hours we have for Debug

        var widthElem= document.getElementById('rough-in-bar').offsetWidth;
       if(widthElem<document.getElementById('rough-in-progress').offsetWidth-20)
       document.getElementById('rough-in-bar').style.width=widthElem + 100 + 'px'
    }

  <style>
    body{
        font-family: 'Roboto Condensed', sans-serif;
        margin: 0;
    }

    h1 {
        text-align: center;
        font-weight: 100;
        font-size: 270%;
        color:white;
        margin: auto;
        height: 50px;
        padding-top:10px;
    }

    div { 
        margin: 5% 5%;
        background-color: rgb(250, 233, 249);
        padding:20px;
        box-shadow: 0px 4px 4px  rgba(44, 62, 80 ,0.15);
    }

    h4{
        text-align: center;
    }

    h2{
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        padding: 0px;
        margin:auto;
    }
    .item p{
        width: 100%;
        height: 10%;
    }

    #rough-in-total{
        background-color: rgb(197, 197, 197, 0.6);
        padding: 5px;
        box-shadow: 0px 4px 4px  rgba(2, 2 , 2, 0.10);
    }

    p{
        text-align: center;
        font-size: 20px;
    }

    header p {
        margin-top: 0;
        color: white;
        font-family: 'Roboto Condensed', sans-serif;
        font-size: 0.8em;
        font-weight: 100;
        text-transform: uppercase;
    }
    button{
        text-decoration: none;
        font-size: 100%;
        padding: .5em 1em;
        color: rgba(0, 0, 0, 0.8);
        border: transparent;
        background-color: rgb(201, 199, 199);
        border-radius: 2px;
        margin-left: 45%;
        box-shadow: 0px 4px 4px  rgba(2, 2 , 2, 0.10);
    }

    button:hover{
        background-color: rgb(90, 90, 90);
        color: white;
    } 
    header{
        background-color: rgb(109, 109, 146);
        height: 100px;
    }

    #rough-in-progress{
        width:100%;
        margin: auto;
        margin-bottom: 20px;
        height: 30px;
        padding: 0;
        background-color: gray;

    }

    #rough-in-bar{
        width: 1%;
        height: 30px;
        background-color: rgb(255, 152, 241);
        margin: auto;
        padding: 0;
        box-shadow: none;
    }
    </style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
    <title>Breakwell Electrical</title>
</head>
<body>
    <header>
            <h1> Welcome Keanu Barnard</h1>
            <p>This will include how many hours you have worked at each job</p>
    </header>

    <section>
        <div class ="item">
            <h2><span>Rough In's</span></h2>
            <p>This will be an account for how many hours you have spent working at rough ins with break well. Including marking out 
                   ,roughing in cable etc..
            </p>
            <!--Insert our Horizontal Graph Here that will increase when we add hours to it for now we just use number-->
            <p id ="rough-in-total"> 123 hours</p>
            <div id ="rough-in-progress">
                <div id="rough-in-bar">

                </div>
            </div>
            <button id = "rough-btn">Add hour</button>
        </div>
    </section>

Answer 2

<style> 
  
  .bar{
  
  border:1px solid #000;
  
  }
  
</style>

<script>

  function func(){
  
  var currentWidth = document.getElementById('box').style.width;
  currentWidth = currentWidth.replace('px','');
  
  document.getElementById('box').style.width = (parseInt(currentWidth) + 100).toString() + "px";
  
  document.getElementById('box2').style.width = (parseInt(currentWidth) + 100).toString() + "px";
  
  }

</script>

type 1

<div class='bar'>
<div id="box" style="width:100px;height:50px;background-color:red;">

</div>
</div>

<br><br>

Type 2

<div class='bar'>
<div id="box2" style="width:100px;height:50px;background-color:red;position:relative;left:50%;transform:translateX(-50%)">

</div>
</div>

<br><br>

<button onclick="func()">Check this...</button>

每次点击将div宽度增加Amount

2 个答案: