PDA

View Full Version : Posizionare elemento javascript con CSS


digital_brain
23-07-2014, 12:38
Buongiorno,
vorrei posizionare degli elementi in javascipt in maniera precisa all'interno di una pagina html con i CSS, ma non so come applicare lo stile all'elemento desiderato.
Se ad esempio ho questo CSS:

<style type="text/css">
.test {
position: absolute;
height: 180px;
width: 270px;
left: 1100px;
top: 140px;
}

</style>

come lo applico al codice javascript?
Grazie mille

Daniels118
23-07-2014, 12:48
Cosa sarebbe un elemento javascript? Vuoi forse dire un elemento html generato con javascript?
Gli attributi css si possono applicare in due modi, inline e tramite fogli di stile. Nel primo caso gli attributi vengono inseriti direttamente nel codice html, all'interno dell'attributo style; nel secondo invece l'associazione avviene tramite i selettori, che sono tanti ed è inutile elencarli qui, comunque i più importanti sono gli id e le classi.
Da javascript puoi impostare style, id e class con dei metodi appositi. Se usi jQuery o altri framework ci sono dei metodi più versatili e convenienti.

digital_brain
23-07-2014, 13:10
Ciao,
intendo ad esempio questo:

<div id= 'chart_div'>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
['1', <?php echo $b ?>],
['2', <?php echo $res_310 ?>],
['3', <?php echo $res_315 ?>],
['4', <?php echo $cons_realtime_310 ?>],


]);

var options = {
width: 1100, height: 400,
redFrom: 4000, redTo: 5000,
yellowFrom:3000, yellowTo: 4000,
minorTicks: 5,
majorTicks: 8,
max: 5000,
min: -5000
};








var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);



}
</script>
</div>

è il codice per la visualizzazione di un "google chart" che vorrei poter posizionare a piacimento all'interno della pagina html

Grazie

ndakota
23-07-2014, 13:36
Con un'occhiata così al volo direi che ti basta assegnare la classe test al contenitore di quel codice per il chart, cioè a #chart_div.

digital_brain
23-07-2014, 13:37
E' quello che ho provato a fare ma non ottengo il risultato sperato.
Come dovrei farla l'assegnazione della classe test esattamente?

MicheleRaponi
23-07-2014, 14:08
E' quello che ho provato a fare ma non ottengo il risultato sperato.
Come dovrei farla l'assegnazione della classe test esattamente?

Se usi jQuery così: http://jsfiddle.net/Hs3w3/

Daniels118
23-07-2014, 14:32
Dal momento che il div è già nell'html e non viene generato da javascript basta che modifichi il tuo css utilizzando come selettore l'id del div, così:
#chart_div {
position: absolute;
height: 180px;
width: 270px;
left: 1100px;
top: 140px;
}
OPPURE aggiungi la classe test al div, così:
<div id= 'chart_div' class="test">