Esperimento: assegnare valori casuali allo style onclick via js

**essezeta** · 06-07-2008, 15:01

Saluti a tutti...

Da quando mi sono messo a imparare qualcosina di js mi vengono delle idee assurde...

VVoVe:

Posso discutere questa con qualcuno della community?

Dato questo js che al click mi cambia gli stili:

codice:

<html>
<head>
<script type="text/javascript">
function assegnaStile()
{
document.getElementById('a_caso').style.backgroundColor = '#ff0000'; 
document.getElementById('a_caso').style.height = '200px'; 
document.getElementById('a_caso').style.width = '400px'; 
document.getElementById('a_caso').style.border = '1px solid'; 
}
</script>
</head>

<body>
<div id="a_caso">content content content content content content content </div>
<input type="button" onclick="assegnaStile()" value="Assogna stili">
</body>

</html>

mi chiedevo:
è possibile ottenere valori casuali per style.height e per .style.width ecc.?
In modo che il div con ID=a_caso risulti con uno sfondo casuale (all'interno di un range di valori), un'altezza casuale (idem), ecc.?

Dove vado ad impostare il range di valori da far assumere? Ad es diversi colori (#ff0000, #00ff00, #0000ff), diverse altezze (200px, 150px, 300px), ecc.

Grazie in anticipo e comunque a tutti...

**cavicchiandrea** · 06-07-2008, 16:15

Questo qui cambia il colore casuale al caricamento/refresh della pagina oppure guarda qui se trovi qualcosa che ti piace di + per la modifica dell'altezza il principio è identico.

**essezeta** · 07-07-2008, 02:44

Intanto grazie (per l'ennesima volta) a cavicchiandrea della dritta...

Smanettando sugli esempi più semplici che mi hai postato, copiando, modificando e combinando pezzi di codice... sono riuscito ad ottenere QUESTO RISULTATO

Se poi ti/vi avanzano cinque minuti da dedicare a un principiante volenteroso guarda/te come avrei fatto per ottenere via js un design casuale...

Definisco tre valori: miavar1, 2 e 3
Condiziono tre situazioni casuali: miavarcur<=1, <=4, altro
Passo il valore-corrispondente-alla-situazione-verificatasi alla proprietà css che inserisco

Insomma, così:

codice:

<script type="text/javascript" language="JavaScript">
<!--
var miavar1="valore_css_A"
var miavar2="valore_css_B"
var miavar3="valore_css_C"

var miavarcur=Math.round(6*Math.random())
if (miavarcur<=1)
miavar=miavar1
else if (miavarcur<=4)
miavar=miavar2
else
miavar=miavar3

document.write('<div style="proprietà_css:'+miavar+'"></div>')
//-->
</script>

Mi chiedo ora:

1. è un modo sporco? Credo di sì... ma quanto???

2. invece di document.write ecc. inserito nell'HEAD come faccio ad avere codice nel BODY a cui passare i valori con document.getElementById? Ci ho provato ma non ottengo gnente... :berto:

3. SOPRATUTTO, quali alternative avrei per riformulare il tutto,
considerando che nel mio esperimento il CASO decide dimensioni, background e z-index per 3 box,
quindi ho più o meno 3 valori x 4 atributi x 3 volte...
insomma una ventina di ripetizioni del mio codice...
Non lo posto, il codice, perché allungherei invano questo post...
ma basta dare un occhio alla DEMO LIVE per osservare il codice...

Datemi un dritta da esperti... js mi sta piacendo un sacco e a smanettarci così, entrando da metà... insomma senza partire (solo) dalle basi dà molte motivazioni in più...

Grazie a tutta la community

**cavicchiandrea** · 07-07-2008, 09:10

Partendo che l'operazione si complica sopratutto x un princiapiante io per fare: "ottenere via js un design casuale..." opererei diversamente creado x fogli di stile diversi e li caricherei via js in modo casuale.
[list=a][*]Molto più semplice[*]Molto più leggero[*]Molto più facile da realizzare[/list=a]
Se ritieni di proseguire la tua teoria devi documentarti nella sezione js (vedi link precedente) dove trovi un ottima guida.
Ciao.

Discussione: Esperimento: assegnare valori casuali allo style onclick via js

Strumenti discussione

Ricerca discussione

Visualizza

Esperimento: assegnare valori casuali allo style onclick via js

Permessi di invio