Verwenden Sie jquery, um die Breite des Containers um 10 zu vergrößern rem

Question

Wie kann ich die Breite eines Elements um 10rem erhöhen, indem Sie jquery verwenden. Problem ist, dass Jquery Breite/Höhe immer in Pixel zurückgibt und wir die Höhe/Breite in einigen anderen Einheiten aktualisieren wollen.

Beispiel auf: 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()); 

Meine Fragen sind Kommentare im Code.

Answer 1

Ich nehme an, dass die font-size des html Element nehmen wird Ihnen die rem, eine Funktion verwenden, werden Sie in der Lage sein, um es abzurufen, selbst wenn sie sich ändert:

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

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

Answer 2

Entschieden, um eine aktualisierte Antwort mit jquery zu posten. Sie können die Funktion ohne einen Parameter aufrufen, um die Anzahl der Pixel in einem rem zu erhalten, oder Sie können eine Zahl für rem übergeben, um die Anzahl der Pixel in diesem rem zu erhalten. Hier ist ein jsFiddle auch: 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); 
    } 
}