Is there a way to increase/decrease the value of CSS line-height with jQuery each time an element is clicked? -
adding either of operators += or -= doesn't work. figure must have line-height property itself. thought post here see whether a) being stupid or b) able me sort of workaround (ideally, text field still responsive).
here's have code-wise: https://jsfiddle.net/448ftbz6/
<head> <script> $(document).ready(function() { $("#up").click(function(){ $("#paragraph p").css({"line-height":"75%"}); }); $("#down").click(function(){ $("#paragraph p").css("line-height":"150%") }); }); </script> </head> <body> <div id="paragraph"> <div id="arrows"> <div id="up">less</div><br> <div id="down">more</div> </div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in sed felis semper, sodales mi sed, bibendum eros. nunc malesuada ligula nisl, vel vehicula ipsum gravida non. praesent mollis orci arcu, id fermentum lectus auctor sit amet. suspendisse ultrices cursus purus quis consequat. suspendisse placerat eget lorem vel euismod. morbi volutpat nisl nulla, @ fermentum erat imperdiet varius. donec non porttitor mi. nam iaculis turpis sit amet lacus luctus, nec consequat sapien ultricies. duis placerat ut mauris eget scelerisque.</p> </div> </body> </html> the jquery seems work, that's not issue; isn't doing want do. ideally, when 1 clicked "less" or "more" button, line-height decrease or increase was. however, seems can set 1 value. know of might able solve problem?
try this
$(document).ready(function() { $("#up").click(function(){ $("#paragraph p").css({"line-height":$("#paragraph p").height()*0.75+"%"}); }); $("#down").click(function(){ $("#paragraph p").css("line-height", $("#paragraph p").height()*1.5+"%") }); });#arrows { float: right; } #up, #down { height: 50px; width: 50px; background-color: #ff00ff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="paragraph"> <div id="arrows"> <div id="up">less</div><br> <div id="down">more</div> </div> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. in sed felis semper, sodales mi sed, bibendum eros. nunc malesuada ligula nisl, vel vehicula ipsum gravida non. praesent mollis orci arcu, id fermentum lectus auctor sit amet. suspendisse ultrices cursus purus quis consequat. suspendisse placerat eget lorem vel euismod. morbi volutpat nisl nulla, @ fermentum erat imperdiet varius. donec non porttitor mi. nam iaculis turpis sit amet lacus luctus, nec consequat sapien ultricies. duis placerat ut mauris eget scelerisque.</p> </div>