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를 사용하여 업데이트 된 답변을 게시하기로 결정했습니다. 매개 변수없이 함수를 호출하여 한 번의 rem에서 픽셀 수를 얻거나 rem의 카운트를 전달하여 많은 rem에서 픽셀 수를 얻을 수 있습니다. 여기 jsFiddle도있다 : ** 만 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); 
    } 
}