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
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">
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.