Change <p> size on click
Question
I'm trying to increase the size of a <p> element, at the moment I have a code but this code changes the size for all the <p> elements in my page and what I want is give the user the freedom to change the size of the element he wants. So my question is: how can I do that? At the moment this is what I have:
$("p").click(function() { var fontSize = parseInt($(this).css("font-size")); fontSize = fontSize + 1 + "px"; $('p').css({ 'font-size': fontSize }); }); $('#reset').click(function() { var fontSize = "8px"; $('p').css({ 'font-size': fontSize }); });
p { font-size: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <button id="reset">Reset</button>
6 answers
solution1
1 ACCPTED 2016-09-15 15:54:17
To change the font-size of ONLY the clicked <p> try this:
$("p").click(function() {
var fontSize = parseInt($(this).css("font-size"));
fontSize = fontSize + 1 + "px";
$(this).css({'font-size':fontSize});
});
solution2
1 2016-09-15 15:54:27
Change:
$('p').css
to:
$(this).css
$(this) refers to the <p> being clicked, instead of $('p') which selects all paragraphs.
solution3
1 2016-09-15 15:54:37
Instead of $('p') you should have to use $(this) . Because $('p') references all the <p> tag of dom and $(this) will the one which has been clicked. Please check below snippet.
$("p").click(function() { var fontSize = parseInt($(this).css("font-size")); fontSize = fontSize + 1 + "px"; //In below line $(p) replaced with $(this) $(this).css({'font-size':fontSize}); }); $('#reset').click(function () { var fontSize = "8px"; $('p').css({'font-size':fontSize}); });
p { font-size: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <button id="reset">Reset</button>
solution4
0 2016-09-15 15:54:55
Instead of targeting 'p' (which selects all elements with the given tag name), you can use the this keyword to target only the element that triggered the event.
$("p").click(function() { var fontSize = parseInt($(this).css("font-size")); fontSize = fontSize + 1 + "px"; $(this).css({'font-size':fontSize}); //console.log(this); }); $('#reset').click(function () { var fontSize = "8px"; $('p').css({'font-size':fontSize}); });
p { font-size: 8px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <button id="reset">Reset</button>
solution5
0 2016-09-15 15:55:28
I think this should be quite simple:
$('p').css({'font-size':fontSize});
should be
$(this).css({'font-size':fontSize});
solution6
0 2016-09-15 16:24:59
<html> <head></head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <style> p{ cursor: pointer; font-size: 12px; } </style> <body> <h1>Do it on click</h1> <p>A</p> <p>B</p> <p>C</p> <p>D</p> <p>E</p> <button id="reset">Reset</button> </body> <script type="text/javascript"> $("p").click(function(){//fire the function when click on any p element var thefontsize = parseInt($(this).css("font-size"));//get the current font size thefontsize = thefontsize+2;//increase the font size for each click $(this).css({"font-size":thefontsize+"px"}); //this keyword only focus on the element which user clicke, no all the elements. }); $("#reset").click(function(){ $("p").css({"font-size":"12px"}); }); </script> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.