Modifica CSS

rare

il 29 lug 2018, 17:07

11 risposte

rare

Pochi posts

Iscritto da: mag, 2010

Messaggi:: 23

Modifica CSS

29 lug 2018, 17:28

Devo modificare il font-size di un <p>
ho provato e riprovato... cercato e anche un po inventato ma nulla

<script type="text/javascript">
		var br = "<br>";
	function writeLn(mex)
		{document.write(mex+br);}
	
	var str = "<p>Ciao Mondo!</p>";
	function formattCSS()
		{	var setP = document.getElementById("p");
			var forma = parseInt((Math.random() * (40 - 30)) + 30);
			//str.style.fontSize = forma + "px"; 
			writeLn(forma + " ... " + typeof(forma));
			
		}
formattCSS();
</script>

per adesso sono qui:
ho la stringa e con una funzione estraggo un numero casuale tra 30 e 40 che poi sarà il font-size. ho provato anche con set_attribute ma nulla...
consigli???

11 Risposte

Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Modifica CSS
29 lug 2018, 23:26
Prova
```
document.getElementById("<elemento>").style.fontSize = "<Grandezza>px";
```
btw a questa domanda ci sono centinaia di risposte su google, basta
R
rare
Pochi posts
Iscritto da
mag, 2010
Messaggi:
23
Re: Modifica CSS
30 lug 2018, 07:32
Si ci avevo provato infatti avevo messo document.getElementById("p") dentro la variabile setP
ma fontsize accetta come valore solo small, medium, large ect
ed io ho una variabile numerica...
ho provato anche con size ma nulla...

altro??
Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Modifica CSS
30 lug 2018, 13:44
Https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_fontsize
R
rare
Pochi posts
Iscritto da
mag, 2010
Messaggi:
23
Re: Modifica CSS
30 lug 2018, 15:26
rare ha scritto:
ma fontsize accetta come valore solo small, medium, large ect
ed io ho una variabile numerica...
come detto ci avevo già pensato, ma purtroppo ho un numero da utilizzare come pixel... quindi mi serve una cosa tipo font-size: 30px
dove 30 è la variabile forma...

altre soluzioni???
Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Modifica CSS
30 lug 2018, 20:48
Nel link che ti ho inviato rimpiazza xx-large con 200px e vedrai che funziona ugualmente,
altrimenti puoi utilizziare jQuery: https://stackoverflow.com/a/5195338/874578
R
rare
Pochi posts
Iscritto da
mag, 2010
Messaggi:
23
Re: Modifica CSS
31 lug 2018, 10:01
Ok provato sul tryit editor e come mi hai detto funziona, mentre su safari mi da questo errore:
null is not an object (evaluating 'document.getElementById("myP").style')
questo il codice (provato anche sulla tryit e funziona
```
	function formattCSS()
		{	var setP = document.getElementById("myP");
			var forma = parseInt((Math.random() * (40 - 30)) + 30);
		 	forma = forma+"px";
		 	document.getElementById("myP").style.fontSize = "50px";
			//writeLn(forma + " ... " + typeof(forma));
		}
formattCSS();
```
mentre per quanto riguarda in JQuery, lo ignora completamente come se non ci fosse proprio
```
	function formattJQ()
		{
			var setJQ = document.getElementById("myP");
			$(setJQ).css("font-size", "400px");
		}
	formattJQ();
```
ovviamente nel body ho:<p id="myP">Ciao Mondo!</p>

a sto punto credo sia un problema nei browser (provato sia su safari che su Chrome)
AH ovviamente per il jq ho messo la libreria

soluzioni???
Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Modifica CSS
31 lug 2018, 12:50
Ti sei assicurato di aver messo tutti i codici di javascript prima di </body> oppure prima di creare l'elemento che stai andando a modificare?

rare

Pochi posts

Iscritto da: mag, 2010

Messaggi:: 23

Re: Modifica CSS

31 lug 2018, 15:06

Questo è tutto il codice
come vedi ho tutto tra head e body, compreso il jQuery
le due funzioni sono formattCSS e formattJQ (la chiamata è commentata per provare la prima)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>DIAPOSITIVA 7</title>
</head>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
		var br = "<br>";
	function writeLn(mex)
		{document.write(mex+br);}
	
	function formattCSS()
		{	var forma = parseInt((Math.random() * (40 - 30)) + 30);
		 	forma = forma+"px";
		 	document.getElementById("myP").style.fontSize = "50px";
		}
formattCSS();
	
	function formattJQ()
		{
			var setJQ = document.getElementById("myP");
			$(setJQ).css("font-size", "400px");
		}
	//formattJQ();
	
	var casual = function()
		{const min = -5, max = 5;
		 var num = parseInt((Math.random() * (max - min)) + min);
		 var pot2 = 2**num;
		// writeLn(num);
		 return "2 elevato " + num + " è " + pot2;
		};
writeLn(casual());
	
	
	
	var log = function()
		{
			const min = 100, max = 1000;
			var cau = Math.log2(((Math.random() * (max - min)) + min)).toFixed(2);
			
			return cau; 
		};
	writeLn(log());
	</script>
<body>

<p id="myP">Ciao Mondo!</p>
</body>
</html>

Hexah

Utente Attivo

Iscritto da: giu, 2018

Messaggi:: 57

Re: Modifica CSS

31 lug 2018, 20:27

Sposta


<p id="myP">Ciao Mondo!</p>

all'inizio del body:


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DIAPOSITIVA 7</title>
</head>
<body>
<p id="myP">Ciao Mondo!</p>


<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
    var br = "<br>";
    function writeLn(mex)
    {document.write(mex+br);}

    function formattCSS()
    {   var forma = parseInt((Math.random() * (40 - 30)) + 30);
        forma = forma+"px";
        document.getElementById("myP").style.fontSize = "50px";
    }
    formattCSS();

    function formattJQ()
    {
        var setJQ = document.getElementById("myP");
        $(setJQ).css("font-size", "400px");
    }
    //formattJQ();

    var casual = function()
    {const min = -5, max = 5;
        var num = parseInt((Math.random() * (max - min)) + min);
        var pot2 = 2**num;
        // writeLn(num);
        return "2 elevato " + num + " è " + pot2;
    };
    writeLn(casual());



    var log = function()
    {
        const min = 100, max = 1000;
        var cau = Math.log2(((Math.random() * (max - min)) + min)).toFixed(2);

        return cau;
    };
    writeLn(log());
</script>
</body>
</html>

ed in generale javascript si mette alla fine del body (prima di </body>, possono esserci eccezioni) mai nel head, nel tuo caso l'errore era derivato javascript veniva eseguito prima che il DOM(la pagina) venisse generata di conseguenza non trovava l'elemento.

R
rare
Pochi posts
Iscritto da
mag, 2010
Messaggi:
23
Re: Modifica CSS
01 ago 2018, 07:31
Alla grande!!! grazie mille
gli errori stupidi sono quelli che ti fanno impazzire di più...

ti chiedo solo un'ultima conferma:
abbiamo detto che il blocco script va prima della chiusura del body, ma se lo mettessi dopo o addirittura alla fine dell'html??
Hexah
Utente Attivo
Iscritto da
giu, 2018
Messaggi:
57
Re: Modifica CSS
01 ago 2018, 14:19
Potresti anche farlo, ma solitamente per far scaricare i contenuti piu' velocemente al browser si mette prima del </body>
Per piu' info leggi qui: https://developer.yahoo.com/performance/rules.html#js_bottom

Devi accedere o registrarti per scrivere nel forum

11 risposte