Change font size Javascript/HTML/Jquery

Asked

Viewed 4,603 times

1

created this application in HTML/Javascript/Jquery ... I wonder 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> <!-- add Jquery CDN -->

		<link href src="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> <!-- add Bootstrap CDN -->

		<script
 			src="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 jquery html

  • can use html inside the text box?

2 answers

0

Here’s a little example of how to do this:

The steps are as follows:

Use Getelement methods to aim at the textarea you want, tell Javascript pro that you want to change a style and that this style is fontsize and assign a value to it.

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

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>

0

Adapted from the response of Pedro 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>

<button type="button" id="btnAumentar">Aumentar fonte</button>
<textarea rows="3" cols="30" class="minhaTextarea">O Alexandre quer alterar tamanho da fonte JavaScript/HTML/Jquery
</textarea>

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.