कंटेनर की चौड़ाई बढ़ाने के लिए jquery का उपयोग करें 10 rem

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 का उपयोग कर एक अद्यतन उत्तर पोस्ट करने का फैसला किया। आप एक रिम में पिक्सल की संख्या प्राप्त करने के लिए पैरामीटर के बिना फ़ंक्शन को कॉल कर सकते हैं, या आप कई रिम में पिक्सेल की संख्या प्राप्त करने के लिए रिम के लिए गिनती में गुजर सकते हैं। यहाँ एक jsFiddle भी है: 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); 
    } 
}