passare attributi al css

[pablitos]

buonasera a tutti

Ho un file js che riceve dati gli elabora e poi dovrebbe passare il dato a una progressbar sulla pagina html

questo :

<style type="text/css">

.progress-bar-background1 {
background-color: #white;
width: 100%;
height: 100%;
position: relative;
top: 0; left: 0;
}

.progress-bar-complete1 {
background-color: red;
width: 50%;
height: 100%;
position: relative;
top: -12px; left: 0;
}

#progress-bar1{
width: 200px;
height: 12px;
border: 2px black solid;
}

</style>


<div id="progress-bar1">
<div class="progress-bar-background1"></div>
<div class="progress-bar-complete1"></div>
</div>


devo passare il dato a .progress-bar-complete1 per l'esattezza all'attributo width: ***;
qualcuno potrebbe farmi capire come passare il dato da js esterno alla pagina, nel senso che si trova nella stessa directory, ma non è nell' html.

l'unica cosa che si avvicina che ho trovato è

document.getElementById("progress-bar-complete1").width = "100%";

che ovviamente inchioda lo script

Mi aiutate per favore? grazie

Saluti

[xxstykkyxx]

document.getElementById("progress-bar-complete1").width = "100%";

Dovrebbe funzionare così, ovviamente con il .style entra nel .css e cerca e sostituisce le caratteristiche dell Id che ci devono essere:

document.getElementById("progress-bar-complete1").style.width="100%";

Comunque se devi passare più operazioni ti conviene fare la variabile:
var progressBarComplete1=document.getElementById ("progress-bar-complete1");

E poi fare tutte le operazioni:
var larghezza=100;
progressBarComplete1.style.width=larghezza+"%";
progressBarComplete1.style.fontFamily="Arial";
ecc.ecc.


Saluti

[pablitos]

Ciao, Grazie per la risposta:

Si funziona se passo i parametri a <div id="progress-bar1">

ma la parte che si riempie è contenuta in una class
<div class="progress-bar-complete1"></div>
quindi non ho un Id, lo devo passare probabilmente con un post o bhoo.





devo visualizzare valori di tensione, corrente e temperature su monitor, ho fatto tutti i comandi ma sulle letture vorrei visualizzarle in tempo reale con delle progressbar. Purtroppo in html sono niubbo.

Anche un altro metodo è ben accetto

ciao e a ri-grazie

[xxstykkyxx]

<div class="progress-bar-complete1"></div>

Rileggiti il mio post di risposta sostituendo
getElementByClassName ("nome_classe");
e da quanto è scritto ti dovrebbe dare un array di oggetti della stessa classe.
quindi dovresti utilizzarlo come array.



se non funziona prova
getElementByClass ("nome_classe");


Fammi sapere

[pablitos]

Ho risolto così, ho dato un id a tutti e funziona

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dati.js"></script>

<style type="text/css">
#progressbar-background {background-color: #white; width: 100%; height: 100%; position: relative; top: 0; left: 0; }

#progressbar-complete {background-color: red; width: 50%; height: 100%; position: relative; top: -12px; left: 0; }

#progressbar{width: 200px; height: 12px; border: 1px black solid; }
</style>


<div id="progressbar">
<div id="progressbar-background"></div>
<div id="progressbar-complete"></div>
</div>



da script dati.js

//valore analogico ricevuto da GET numero intero da 0-1023
var percent = ((analog_data/1024)*100) + "%";
document.getElementById("progressbar-complete").style.width = percent;


sarebbe bello mettere anche un numero dentro la barra al centro

ciao grazie ancora