Miguel Fernandez Miguel Fernandez - 2 months ago 7
HTML Question

Change <p> size on click

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>




Answer

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});
});