Change font size JavaScript / HTML / Jquery [duplicate]

Question

Change font size JavaScript / HTML / Jquery [duplicate]

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

I created this application in HTML / JavaScript / Jquery ... I would like to know how I put a button to increase font size within the textarea. Anyone have an idea?

<html>

<meta charset="UTF-8"> <!-- add special characters -->

	<head>

		<title>Página</title> <!-- Add page title -->

		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!--addJqueryCDN--><linkhrefsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- add bootstrap css CDN -->	

	</head>


	<body class="corpo">

		<h1><center>Página Monstra</center></h1> <!--  -->
			<hr/>

	
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><!--addBootstrapCDN--><scriptsrc="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
  			integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
		    crossorigin="anonymous"></script> <!-- library draggable -->

		<link href="design.css" rel="stylesheet" media="screen"> <!-- Add css in html -->



		<script type="text/javascript"> // all javascript/jquery code start here


		function mover(){
		$('.mover').draggable(); // add draggable library

		};

			function add_field() 
    	{
    		
       	 	// ------------------------------------------------------
       	 	var form = document.getElementsByTagName('form')[0],
        	input = document.createElement('textarea');
            input.setAttribute('id',count.toString());
       		input.setAttribute('type', 'textarea');
        	input.setAttribute('name', 'item');
            form.appendChild(input);

            input = document.createElement('button');
        	input.setAttribute('type', 'button');
        	input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:blue;';");
        	input.setAttribute('name', 'item');
        	input.setAttribute('class', 'btnalterar');
        	form.appendChild(input);


        	input = document.createElement('button');
        	input.setAttribute('type', 'button');
        	input.setAttribute('onclick',"document.getElementById(" + count + ").style = 'background-color:white;';");
        	input.setAttribute('name', 'item');
        	input.setAttribute('class', 'btnalterar');
        	form.appendChild(input);

        };


        	function info(){
        		alert("ATÉ 10 CAIXAS DE TEXTO");

        	};
        		
        		var count = 0;
        		
        	
       	 	 function contador() 
    	{

       	 	count++;
       	 	console.log(count); // show count in console

       	 	if(count >= 10){
       	 		$( ".button" ).prop( "disabled", true ); // disable button

       	 	}
        };

 
		</script>


			<form name="input" method="get">
    			<div class="ui-input-text">      
        			<div data-role="navbar">
           				  <button type="button" class="button" onclick="add_field(); contador(); mover();">ADICIONAR CAIXAS DE TEXTO</button> <!-- Create add button -->
    					  <button onclick="info();">i</button><br><br>
        			</div>
    			</div>
			</form>


			<!-- SALVAR -->


			<form name="input" method="get">
    			<div class="ui-input-text">      
        			<div data-role="navbar">
           				  <button type="button" class="btnsave">SALVAR</button><br><br> <!-- Create save button -->
        			</div>
    			</div>
			</form>


			<div class="mover">
			<br>
				<button onclick="mover();">Click</button>
			</div>
			
	</body>

</html>

javascript html jquery

asked by anonymous 24.09.2017 / 19:34

2 answers

Fill meta description via javascript does Google interpret the code? DomPDF Illegal error "offset offset 'hex' online 1150 style.cls.php"

score 0 · Answer 1

Here is a small example of how to do this:

The steps are as follows:

Use the GetElement methods to target the textarea you want, tell Javascript that you want to change a style and that this style is fontSize and assign a value to it.

In this example, clicking the Button will change the font of Textarea.

I hope you understand.

<html>
	<head>
	</head>
	<body>
	<textarea id="oi" style=""></textarea>
	 <button type="button" id="botao" onclick="aumentar()">Click Me!</button> 
	</body>
	<script>
	function aumentar(){
		document.getElementById("oi").style.fontSize="40px";
	}
	</script>	
</html>

score 0 · Answer 2

Adapted from the answer from Peter Camara Junior

var $btnAumentar = $("#btnAumentar");
var $elemento = $("body .minhaTextarea");

function obterTamnhoFonte() {
  return parseFloat($elemento.css('font-size'));
}

$btnAumentar.on('click', function() {
  $elemento.css('font-size', obterTamnhoFonte() + 1);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontype="button" id="btnAumentar">Aumentar fonte</button>
<textarea rows="3" cols="30" class="minhaTextarea">O Alexandre quer alterar tamanho da fonte JavaScript/HTML/Jquery
</textarea>