Usa jquery per aumentare la larghezza del contenitore di 10 rem

Question

Come posso aumentare la larghezza di un elemento di 10rem usando jquery. Il problema è che Jquery restituisce sempre larghezza/altezza in pixel e vogliamo aggiornare l'altezza/larghezza in alcune altre unità.

Esempio 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()); 

Le mie domande sono commenti nel codice.

Answer 1

Suppongo che prendendo la font-size dell'elemento html vi darà la rem, utilizzando una funzione, sarete in grado di recuperarlo anche se cambia:

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

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

Answer 2

Deciso di pubblicare una risposta aggiornata usando jquery. Puoi chiamare la funzione senza un parametro per ottenere il numero di pixel in un rem, oppure puoi passare un conteggio per rem per ottenere il numero di pixel in quel numero di rem. Ecco un jsFiddle anche: 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); 
    } 
}