jqueryを使用してコンテナの幅を10分増やす

Question

jqueryを使用して要素の幅を10remまで増やすにはどうすればよいですか？問題は、Jqueryは常に幅と高さをピクセル単位で返します。他の単位で高さ/幅を更新する必要があります。

例について：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()); 

私の質問は、コード内のコメントです。

Answer 1

私はhtml要素のfont-sizeを服用すると、機能を使用して、あなたにremを与えると仮定し、あなたはそれが変化しても、それを取得することができます：

// 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()); 
    } 

例：http://jsfiddle.net/4NkSu/1/

Answer 2

jqueryを使用して更新された回答を投稿することを決定しました。関数をパラメータなしで呼び出して、1つのremのピクセル数を取得するか、またはremのcountを渡して、その多くのremのピクセル数を取得することができます。ここjsFiddleもあります：_HTTPを：：//www.w3.org/TR/css3のみW3C standarsに応じてご覧ください** 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); 
    } 
}