Użyj jquery, aby zwiększyć szerokość kontenera o 10 rem

Question

Jak mogę zwiększyć szerokość elementu przez 10rem używając jquery. Problem polega na tym, że Jquery zawsze zwraca szerokość/wysokość w pikselach i chcemy zaktualizować wysokość/szerokość w niektórych innych jednostkach.

na przykład: 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()); 

Moje pytania są komentarze w kodzie.

Answer 1

Przypuszczam, że biorąc font-size elementu html daje rem, wykorzystując funkcję, będziesz mógł odzyskać nawet jeśli zmienia:

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

przykład: http://jsfiddle.net/4NkSu/1/

Answer 2

Postanowiono opublikować zaktualizowaną odpowiedź za pomocą jquery. Możesz wywołać funkcję bez parametru, aby uzyskać liczbę pikseli w jednym remu, lub możesz przekazać wartość rem, aby uzyskać liczbę pikseli w wielu rem. Oto jsFiddle również: 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); 
    } 
}