www.webdeveloper.com
Results 1 to 11 of 11

Thread: increasing font by 1 px

  1. #1
    Join Date
    Jun 2013
    Posts
    23

    increasing font by 1 px

    Hello people,

    I have some code. There is a button and text. When the button has been pressed, the text font should increase by 1 pixel every time the button has been pressed. This is de code i have. It should work on this way but i made a mistake at "style.fontsize = fontsize + 1;" but i don't know what the correct code is. Anyone else know?? U should really help me! Thanks.

    Reckimo..


    (CODE)

    <script>

    window.onload = function letsgo (){
    document.getElementById("tekst").style.fontsize = fontsize + 1;

    }

    </script>

    </head>

    <body>

    <h1 id="tekst">"Dit is een stuk tekst."</h1>

    <input type="button" id="knop" value="verander kleur" onclick="letsgo ();">

    </body>
    </html>

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    Try something like this
    Code:
    document.getElementById("tekst").style.fontSize = parseInt(document.getElementById("tekst").style.fontSize) + 1;
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jun 2013
    Posts
    23
    Sup3rkirby thank you for your answer. It worked, but to understand the code, why parseint? Parseint transforms a number to string right? It has to be a number and not a string, am i correct?

    Dont understand correctly this piece of code:
    = parseInt(document.getElementById("tekst").style.fontSize) + 1;

  4. #4
    Join Date
    Jun 2013
    Posts
    23
    Edit: after trying your code the code you wrote doesn't work unfortunately.. Any idea?

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    It's actually the reverse of what you are thinking. parseInt() takes a non-integer and converts it into an integer. So in the case of the font-size attribute it would take a value like "14px" and convert it to 14, allowing you to properly add a number to it (giving you 15 rather than string concatenation which would give you 141).

    [EDIT]
    And my apologies. Since this value is being applied to the font-size attribute it requires a unit. My code would simply return 15 where you would want the value to be "15px". Try this:
    Code:
    document.getElementById("tekst").style.fontSize = (parseInt(document.getElementById("tekst").style.fontSize) + 1) + "px";
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  6. #6
    Join Date
    Jun 2013
    Posts
    23
    Thank you for the answers. An integer means number? Translator doenst give a right answer on that translate.

    About the code:
    Unfortunately still not working. This is what i have:

    http://i62.tinypic.com/5ozbsm.png

    (http://i62.tinypic.com/5ozbsm.png)

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    At this point the problem isn't javascript. There is no font-size set for your <h1> by default. Typically you could set something like that in the CSS. There is no standard (or safe) way to get the font-size of an element if it hasn't been set.

    And to answer your question about integers. An integer is a whole number (no decimals). Hopefully that translates a little better.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  8. #8
    Join Date
    Jun 2013
    Posts
    23
    Oops! My faulty... excuse me.. also i am learning javascript every day .

    Still the code is not working... i'm sorry i have to say it. (A)
    Even if i put the <style> under the <script> its still not working. The button works fine, when i replace the function for a alert the button gives an alert when the button has been clicked.

    My new code with <style>:
    http://i62.tinypic.com/330a54i.png

  9. #9
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    955
    Well, it looks like you can get the font-size via javascript, however this method does not work in IE8 and lower.
    Code:
    	function vergroot() {
    		var $fontSize = document.getElementById("tekst").style.fontSize;
    		if($fontSize == "") {
    			var $style = window.getComputedStyle(document.getElementById('tekst'));
    			$fontSize = $style.getPropertyValue('font-size');
    		}
    		console.log($fontSize);
    		document.getElementById("tekst").style.fontSize = (parseInt($fontSize) + 1) + "px";
    	}
    This version will first check to see if there is a font-size on the element itself. If not, it checks the CSS and gets the font-size from there. Again this requires IE9+, Chrome, Safari, Firefox (or any other modern browser).
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  10. #10
    Join Date
    Mar 2009
    Posts
    501
    You can try this trick, which may not work for particular browsers/versions, like so:

    Code:
    // assume the element you want to get the font size of has an id of "d1"
    
    var id, sp;
    
    id = document.getElementById('d1');
    sp = document.createElement('span');
    sp.style.display = 'inline-block';
    sp.style.padding = '0px';
    sp.style.width = '1em';
    sp.style.height = '1em';
    id.appendChild(sp);
    console.log("pxWidth: " + sp.offsetWidth);
    console.log("pxHeight: " + sp.offsetHeight);
    id.removeChild(sp);

  11. #11
    Join Date
    Jun 2013
    Posts
    23
    All the people thanks for help!!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles