Use jquery to increase width of container by 10 rem

Question

How can I increase the width of an element by 10rem using jquery. Issue is Jquery always return width/height in pixels and we want to update the height/width in some other units.

Example on: JS Bin

var $c = $('#container');
console.log($c.width());

var c = document.getElementById('container');

// Q1. Why is it different from above one. This is 324 while earlier it was 320. See the output.
console.log(c.clientWidth);

// Q2. How to update the code to increase the width by 10rem.
$c.css({width: $c.width() + 10}); //It adds 10 pixels here.

console.log($c.width());

My questions are comments in the code.

Answer 1

Decided to post an updated answer using jquery. You can call the function without a parameter to get the number of pixels in one rem, or you can pass in a count for rem to get the number of pixels in that many rem. Here's a jsFiddle also: http://jsfiddle.net/drmyersii/mr6eG/

var rem = function (count)
{
    var unit = $('html').css('font-size');

    if (typeof count !== 'undefined' && count > 0)
    {
        return (parseInt(unit) * count);
    }
    else
    {
        return parseInt(unit);
    }
}

Answer 2

I suppose that taking the font-size of the html element will give you the rem, using a function, you'll be able to retrieve it even if it changes:

   // This Function will always return the initial font-size of the html element 
   var rem = function rem() {
        var html = document.getElementsByTagName('html')[0];

        return function () {
            return parseInt(window.getComputedStyle(html)['fontSize']);
        }
    }();

// This function will convert pixel to rem
    function toRem(length) {
        return (parseInt(length) / rem());
    }

example: http://jsfiddle.net/4NkSu/1/