javascript change font size

Question

Good day to all, Sorry if you find this question dumb. Can anyone please help me on how to change the font of the printed output? They said .style.fontSize but I don't know to how use it in that code. Any help would be much appreciated. Thanks!

<html>
<body>
<div id="display-date">
        <script language="javascript"> 
        today = new Date();
        var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var yr = today.getYear();


        if(yr < 1900) yr += 1900;
        document.write(today.getDate() + " " + month[today.getMonth()] + " " + yr);
        </script>
</div>
</body>
</html>

Who is 'they,' in context? And did you consider asking them what that would involve? — David Thomas
– David Thomas, Commented Apr 28, 2013 at 15:08
In the internet. I just googled some of it but no idea on how to use them. Sorry. — Boy Karton
– Boy Karton, Commented Apr 28, 2013 at 15:10

David Thomas · Accepted Answer · 2013-05-05 17:33:34Z

I'd suggest the following:

document.getElementById('display-date').style.fontSize = '2em'; // or whatever measurement.

And, because I had a few moments, here's a function:

function fontSizeChange(elem, factor) {
    if (!elem) {
        return false;
    }
    else {
        factor = factor || 2; // 2 is the default
        elem = elem.nodeType && elem.nodeType === 1 ? elem : document.getElementById(elem);
        var cur = window.getComputedStyle(elem, null).fontSize,
            size = parseInt(cur.replace(/\D+/g,''),10),
            unit = cur.replace(/\d+/g,'');
        elem.style.fontSize = (size * factor) + unit;
    }    
}

Call like so:

fontSizeChange('display-date', 3);

JS Fiddle demo.

Or:

fontSizeChange(document.getElementById('display-date'), 4);

JS Fiddle demo.

Or (if you want to use the default setting, you can omit the factor argument):

fontSizeChange('display-date');

JS Fiddle demo.

And, of course, you can shrink thngs too:

fontSizeChange('display-date',0.25);

JS Fiddle demo.

You could also, of course, use CSS:

#display-date {
    font-size: 2em;
}

JS Fiddle demo.

An updated version that allows the resizing to be attached to a returned element (document.querySelector() / document.getElementById()) or a nodeList (document.getElementsByTagName() / document.querySelectorAll()):

Object.prototype.resize = function (prop, factor) {
    if (prop) {
        factor = parseFloat(factor) || 2;
        var self = this.length ? this : [this],
            cur, size, unit;
        for (var i = 0, len = self.length; i < len; i++) {
            var cur = window.getComputedStyle(self[i],null)[prop],
                size = parseFloat(cur.replace(/\D/g,'')),
                unit = cur.replace(/\d+/g,'');
            self[i].style[prop] = (size * factor) + unit;
        }
    }
    return this;
};

document.getElementsByTagName('div').resize('width',3);
document.getElementById('display-date').resize('font-size', 2.5);

JS Fiddle demo.

Object.prototype.resize = function (prop, factor) {
    if (prop) {
        factor = parseFloat(factor) || 2;
        var self = this.length ? this : [this],
            cur, size, unit;
        for (var i = 0, len = self.length; i < len; i++) {
            var cur = window.getComputedStyle(self[i],null)[prop],
                size = parseFloat(cur.replace(/\D/g,'')),
                unit = cur.replace(/\d+/g,'');
            self[i].style[prop] = (size * factor) + unit;
        }
    }
    return this;
};

document.querySelectorAll('div').resize('height',3);
document.querySelector('#display-date').resize('font-size', 0.5);

JS Fiddle demo.

References:

element.style.

PSR · Accepted Answer · 2013-04-28 15:08:57Z

0

You can use style attribute to change the css properties from javascript

document.getElementById('display-date').style.fontSize = '2em'

answered Apr 28, 2013 at 15:08

PSR

40.4k43 gold badges115 silver badges154 bronze badges

1 Comment

PSR Over a year ago

@Boy Karton see my answer once.try this

vishakvkt · Accepted Answer · 2013-04-28 15:12:56Z

0

Instead of using document.write, you can do something like the the following

<style>
  .my_style_class
 {
   // add your font styling information here
   font-size: small;
 }
</style>
<div id="display-date" class="my_style_class">        
</div>

<script>
   document.getElementById("display-date").innerHTML = your_function_which_gets_the_date();
</script>

answered Apr 28, 2013 at 15:12

vishakvkt

8646 silver badges7 bronze badges

Collectives™ on Stack Overflow

javascript change font size

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related