Auslesen eines width Wert

Paddel · 29. Mai 2018

Ich möchte einen Ladebalken erschaffen, der bei jedem Klick sich um 10 pc erweitert. Aber ich kann den width Wert irgendwie nicht auslsen und langsam verzweifel ich etwas. Hat vlt. jemand eine Idee? Wäre sehr dankbar.

Beste Grüße

Code

<head>
    <style>
#ladebalken {
    display: block;
    background: green;
    width: 10px;
    height: 1em;
    border: 1px solid darkgreen;
    offsetWidth: 20px;
    
}
    </style>
</head>
<body onload="codeAddress();">
<h1>Ladebalken</h1>

<main>
    <p>Fortschritt: <span id="ladebalken"> </span> </p>
    <button id="button">Los!</button>
</main>
<script>
function codeAddress() {
       
    var button = document.getElementById('button');
    button.onclick = function() { 
      
        var ladebalken = document.getElementById('ladebalken');
        var tmp = ladebalken.style.offsetWidth ;
        alert( ladebalken.style.width);
        ladebalken.style.width =  ladebalken.style.width + "px" + "10px";

}

}
</script>

Alles anzeigen

basti1012 · 29. Mai 2018

probier es mal so

Code

<head>
    <style>
#ladebalken {
    display: block;
    background: green;
    width: 10px;
    height: 1em;
    border: 1px solid darkgreen;
 
    
}
    </style>
</head>
<body onload="codeAddress();">
<h1>Ladebalken</h1>
<main>
    <p>Fortschritt: <span id="ladebalken"> </span> </p>
    <button id="button1">Los!</button>
</main>
<script>
function codeAddress() {
       
    var button1 = document.getElementById('button1');
    button1.onclick = function() { 
      
        var ladebalken = document.getElementById('ladebalken');
        var tmp = ladebalken.offsetWidth;
   
        var temp = Math.round(tmp+10);
  
        ladebalken.style.width=temp+'px';
}
}
</script>

Alles anzeigen

Ps kleiner Hinweis

Man sollte keinen Tag name als id Nehmen, das könnte zu konflikte führen.Kann muß aber nicht passieren

Und das

offsetWidth: 20px;

Gibt es meiner Meinung nach in Css nicht. Könnte mich aber auch irren

Paddel · 29. Mai 2018

Wow. Vielen Danke

Auslesen eines width Wert

Jetzt mitmachen!

Teilen