Increase CSS atribute on button click

Question

I would like to know if there is a way to increase the value of a css attribute when a button is clicked.

For example the css would be

.Testclass{
font-size:30px;
}

is there a way to increase the number in that css attribute by 10 every time the button is click either suing js or jquery.

Bernd · Answer 1 · 2014-09-28T17:53:03.857

0

Try this code below...

EDIT (see comments below): Put this into the function

 var p = parent_window.document.body;
 var size = $('#teleprompter',p).css('font-size').slice(0,-2);
 size-=10;
 $('#teleprompter',p).css('font-size',size+'px');

Other snippet (old):

$('button[name=btn]').click(function(){
  var size = $('.Testclass').css('font-size').slice(0,-2);
  size -=10;
  $('.Testclass').css('font-size',size+'px')
  });

.Testclass{
font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button name="btn">Make the font-size smaller!</button><div class="Testclass">TEXT</div>

Greetings from Austria

edited Sep 28 '14 at 17:53

answered Sep 28 '14 at 16:12

Bernd

730
1
5
13

would it matter if the actual css is in a separate file? – Jessie Sep 28 '14 at 16:33
Oh i believe this could be a problem... – Bernd Sep 28 '14 at 16:51
is there a work around for that – Jessie Sep 28 '14 at 16:59
So i've tried it with an external CSS and it also works... show me your code (html + jscript) – Bernd Sep 28 '14 at 17:13
can i link you to a zip of my code? – Jessie Sep 28 '14 at 17:15
Okay just post it here – Bernd Sep 28 '14 at 17:16
here is my code - to run it use internet explorer - http://www.mediafire.com/download/nij4052lrb4f6xg/app.zip – Jessie Sep 28 '14 at 17:16
the button to change the size is in the popup – Jessie Sep 28 '14 at 17:21
So when i open it both buttons work? And you can try to work with `$('#teleprompter',window.parent.document).css(...);` – Bernd Sep 28 '14 at 17:29
Yh both buttons will works until the update text is clicked , so it would be var size = $('.teleprompter',window.parent.document).css('font-size').slice(0,-2); – Jessie Sep 28 '14 at 17:32
Yes! This should work – Bernd Sep 28 '14 at 17:34
It dosent work for me – Jessie Sep 28 '14 at 17:36
its almost like the code isnt doing anything because if i run the app in chrome and click any other button i get a security error which shows that its working – Jessie Sep 28 '14 at 17:48
Edited the post! Should work now. – Bernd Sep 28 '14 at 17:54
again , it still dosent work with the new code. I you see there is code there to increase and decrease text size , but that stops working after the update text button has been clicked. Is there a way to fix that> – Jessie Sep 28 '14 at 18:43

Increase CSS atribute on button click

1 Answers1