cambiare + velocemente parametri di un css

ky · 19-01-2004, 16:07

Ciao a tutti!!
Ho un problema...e sono quasi certa che esista una soluzione + furba e veloce della mia...o almeno spero!!Mi potete aiutare x favore?

Io vorrei cambiare il carattere dei campi inseriti in un'area tramite caselle di input, ma x il momento sto creando una classe per ogni tipo di carattere e per ogni tipo di dimensione carattere...xò diventa un css gigantesco...oltretutto devo creare una marea di funzioni per applicare le modifiche...e non so se ciò abbia un senso...

Per capire meglio:
Questa è la mia pagina html:

codice:

<html>
<head>
<title>Prova per cambiare carattere</title>
<style type=text/css>@import url("cambiacarattere.css");
</style>

<script type="text/javascript">
function copia(ff) {
  document.getElementById('nome').innerHTML = ff.nome.value + "
";
 }
 

function verdana10(ff) {
document.getElementById('nome').className = 'nome_verdana10'; return false;
}

function times10(ff) {
document.getElementById('nome').className = 'nome_times10'; return false;
}

function verdana12(ff) {
document.getElementById('nome').className = 'nome_verdana12'; return false;
}

function times12(ff) {
document.getElementById('nome').className = 'nome_times12'; return false;
}

function verdana14(ff) {
document.getElementById('nome').className = 'nome_verdana14'; return false;
}

function times14(ff) {
document.getElementById('nome').className = 'nome_times14'; return false;
}

</script>


</head>
<body bgcolor="#FFFFFF" text="#000000">


<div class="nome" id="nome">Testo inserito
</div>
    

<form><table width="30%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td> 

      </td>
      <td> 
        <input name="nome" onblur="copia(this.form);" size="45" maxlength="40" />
      </td>
    </tr>
    
  </table>
 
 
</form> 



Verdana 10pt - Times 10pt</p>


Verdana 12pt - Times 12pt</p>


Verdana 14pt - Times 14pt</p>
</body>
</html>

e questo è il css collegato (si deve chiamare cambiacarattere.css)

codice:

div.nome {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt arial;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_verdana10 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_verdana12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}


div.nome_verdana14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt verdana;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}


div.nome_times10 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 10pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_times12 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 12pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

div.nome_times14 {
        display: inline;
        background-position:absolute;
	background:#ffff00;
	font: 14pt times new roman;
        width:8cm;
        height:0.4cm;
        padding:0px;
        margin-left:5px;
	margin-top:2px;
        border: 0px dotted #000;       
}

E' proprio necessario che io crei una classe e una funzione per ogni tipo di font e di dimensione carattere di tale font, o c'e' un metodo + semplice e veloce per cambiare solo tale parametro?

Considerate che nell'esempio c'e' solo il campo nome, ma ci dovranno essere molti altri campi, ognuno formattabile singolarmente...quindi diventerebbe un lavorone gigantesco... :master:
Per favore aiutatemiiiiiii!!!

Grazie 10000!!!!

**antos** · 19-01-2004, 16:16

http://pro.html.it/articoli/id_263/idcat_8/pro.html
guarda potresti provare ad usare l'ogetto styleSheet (funziona solo con IE e Mozilla però)

ky · 19-01-2004, 17:13

...ma non mi funge...

Ora la mia pag. htm è stata così modificata:

codice:

<html>
<head>
<title>Prova per cambiare carattere</title>
<style type=text/css>@import url("cambiacarattere.css");
</style>


<script type="text/javascript" language="JavaScript">
<!--
ok = (document.styleSheets) ? 1 : 0; IE = ((ind1 = navigator.appVersion.indexOf("MSIE")) > -1) ? 1 : 0;
IE4 = (IE && document.all) ? 1:0;

NN = (navigator.appName.indexOf("Netscape")>-1) ? 1 : 0;
NN4 = (NN && document.layers) ? 1 : 0;
NN6 = (NN && document.getElementById) ? 1:0;

if(ok) {
if(IE4) stile = document.styleSheets[0].rules
if(NN6) stile = document.styleSheets[0].cssRules 
}


function aumenta() {
if(ok) {
var size = stile[0].style.fontSize.substring(0,2)
var dimFont = parseInt(size,10)
dimFont += 2;
{
if (dimFont > 16) dimFont = 16;
}
stile[0].style.fontSize = dimFont + 'px'; 
}

else
alert("l'oggetto styleSheets\nNON\nè supportato")
}

function cambiaFont() {

if (stile[0].style.fontFamily == "Verdana, Arial, Helvetica, sans-serif") 
stile[0].style.fontFamily = "georgia,times,times new roman,serif";

else

stile[0].style.fontFamily = "Verdana, Arial, Helvetica, sans-serif";

}




function copia(ff) {
  document.getElementById('nome').innerHTML = ff.nome.value + "
";
 }
 

function verdana10(ff) {
document.getElementById('nome').className = 'nome_verdana10'; return false;
}

function times10(ff) {
document.getElementById('nome').className = 'nome_times10'; return false;
}

function verdana12(ff) {
document.getElementById('nome').className = 'nome_verdana12'; return false;
}

function times12(ff) {
document.getElementById('nome').className = 'nome_times12'; return false;
}

function verdana14(ff) {
document.getElementById('nome').className = 'nome_verdana14'; return false;
}

function times14(ff) {
document.getElementById('nome').className = 'nome_times14'; return false;
}

</script>


</head>
<body bgcolor="#FFFFFF" text="#000000">


<div class="nome" id="nome">Testo inserito
</div>
    

<form><table width="30%" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td> 

      </td>
      <td> 
        <input name="nome" onblur="copia(this.form);" size="45" maxlength="40" />
      </td>
    </tr>
    
  </table>
 
 
</form> 


</p>



Aumenta - <a href="#" onclick="cambiaFont()">Cambia 
  font</a></p>




Verdana 10pt - Times 10pt</p>


Verdana 12pt - Times 12pt</p>


Verdana 14pt - Times 14pt</p>
</body>
</html>

pero' mi restituisce errore...non so cosa devo fare...mi potete ancora aiutare x favore?
Grazie!

**antos** · 19-01-2004, 19:50

guarda che hai fatto un pò di caos:
1)hai riscritto uan funzione che fa la stessa cosa ma con valori diversi quando potevi passare un parametro
es:

codice:

function txtSize(size) {
 document.getElementById('nome').style.fontSize = size+"pt"; 
}

nell'html
<div id="nome" style="font-size:10px;">
  Verdana 10pt
  Verdana 12pt
</div>

come vedi però devi utilizzare l'attributo style nel tag div (o a qualunque elemento tu voglia applicare
se invece vuoi modificare il contenuto di un qualsiasi selettore definito "al volo" allora devi usare l'oggetto styleSheet:

codice:

ok = (document.styleSheets) ? 1:0;
IE4 = (document.all) ? 1:0;
NN6 = (!document.all && document.getElementById) ? 1:0;

if(ok) {
  if(IE4) stile = document.styleSheets[0].rules
  if(NN6) stile = document.styleSheets[0].cssRules
  }

function cambiaFontSize(size) {
  stile[0].style.fontSize = size;
}

function cambiaFont(font){
  stile[0].style.fontFamily = font;
}

nell'html basta scrivere
10 pt
Verdana

per capirci meglio guarda qui:
per far si che funzioni il codice sopra c'è bisogno che nel css specifichi per primo lo stile del div che ha per id nome (e che quindi nel css ha indice 0) se non è il primo di basta vedere dopo quanti elementi lo hai definito (partendo da 0 mi raccomando) e cambiando l'indice della variabile stile
http://pro.html.it/articoli/id_211/i...pag_3/pag.html

ky · 20-01-2004, 11:18

Fantasticoooooo!!!!!
Funziona perfettamente!
Ho usato la prima soluzione:

codice:

function txtSize(size) {
 document.getElementById('nome').style.fontSize = size+"pt"; 
}

nell'html
<div id="nome" style="font-size:10px;">
  Verdana 10pt
  Verdana 12pt
</div>

Ancora una cosa...è possibile far aumentare i pt di 2 ogni volta che si preme su un bottone? invece di dover fare tanti link ognuno con la sua misura....

Grazie 100000!

**antos** · 20-01-2004, 11:39

Originariamente inviato da ky
Ancora una cosa...è possibile far aumentare i pt di 2 ogni volta che si preme su un bottone? invece di dover fare tanti link ognuno con la sua misura....

Grazie 100000!

ma certo che si può:

codice:

var fontSize = 10pt //valore di default
function upSize() {
 fontSize += 2;
 document.getElementById('nome').style.fontSize = fontSize+"pt"; 
function donwSize() {
 fontSize -= 2;
 document.getElementById('nome').style.fontSize = fontSize+"pt"; 
}
  Aumenta
  Diminusìci

ps
non sono un mito ho semplicemente applicato l'articolo di pro.html.it

ky · 20-01-2004, 12:39

Grazie!...anch'io ho letto l'articolo, ma non riuscivo ad applicarlo al mio caso...non ci avevo capito molto

Ho fatto solo una correzione al tuo codice, che potrebbe tornare utile anche agli altri...
togliere pt dalla prima riga:

codice:

var fontSize = 10 //valore di default

Grazie 1000 e alla prossima!

**antos** · 20-01-2004, 12:43

Originariamente inviato da ky
Grazie!...anch'io ho letto l'articolo, ma non riuscivo ad applicarlo al mio caso...non ci avevo capito molto

Ho fatto solo una correzione al tuo codice, che potrebbe tornare utile anche agli altri...
togliere pt dalla prima riga:

codice:

var fontSize = 10 //valore di default

Grazie 1000 e alla prossima!

scusami una piccola distrazione :-P
la correzione è + che giusta altrimenti lo script non va!

ky · 21-01-2004, 10:52

Sempre riguardo al codice html postato sopra, allo stesso modo del comando per cambiare font, avrei bisogno di un comando per far allineare il mio testo a destra, al centro o a sinistra ...

Pensavo di usare una funzione di questo tipo:

codice:

function allinea(position) {
  document.getElementById('nome').style.float = position; 
}

e poi, richiamarla con due bottoni così:

codice:

<input type="submit" name="Submit" value="R" onclick="allinea('right');">
<input type="submit" name="Submit" value="L" onclick="allinea('left');">

pero' non succede assolutamente nulla....
qualcuno mi puo' dire come posso fare?
x favore aiutatemi!

Grazzzzzieeeee!!!

**antos** · 21-01-2004, 10:55

non succede niente perchè in questo modo attacchi il div che contiene il testo a destra o a sinistra
per il testo devi usare textAlign:

function allinea(position) {
document.getElementById('nome').style.textAlign = position;
}
i valori possibili left|center|right|justify

ciao

Discussione: cambiare + velocemente parametri di un css

Strumenti discussione

Ricerca discussione

Visualizza

cambiare + velocemente parametri di un css

grazie antos

ma sei un mito!!!

Re: ma sei un mito!!!

Ora funziona perfettamente!

Re: Ora funziona perfettamente!

eccomi di nuovo in cerca d'aiuto...

Permessi di invio