Modifica CSS

di Anonimizzato7290 il
11 risposte
/
Anonimizzato7290
Utente anonimizzato
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

  • /
    Anonimizzato24071
    Utente anonimizzato
    Prova 
    document.getElementById("<elemento>").style.fontSize = "<Grandezza>px";
    btw a questa domanda ci sono centinaia di risposte su google, basta
  • /
    Anonimizzato7290
    Utente anonimizzato
    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??
  • /
    Anonimizzato7290
    Utente anonimizzato

    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???
  • /
    Anonimizzato24071
    Utente anonimizzato
    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
  • /
    Anonimizzato7290
    Utente anonimizzato
    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???
  • /
    Anonimizzato24071
    Utente anonimizzato
    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?
  • /
    Anonimizzato7290
    Utente anonimizzato
    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>
  • /
    Anonimizzato24071
    Utente anonimizzato
    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.
  • /
    Anonimizzato7290
    Utente anonimizzato
    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??
Devi accedere o registrarti per scrivere nel forum
11 risposte