Konteynerin genişliğini artırmak için jquery'yi kullanın 10 rem

Question

JQuery kullanarak bir öğenin genişliğini 10kt kadar nasıl artırabilirim? Sorun Jquery her zaman genişlik/yükseklik değerini piksel olarak döndürüyor ve diğer bazı birimlerdeki yükseklik/genişlik değerini güncellemek istiyoruz.

Örnek tarih: 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()); 

Sorularım kodunda yorumları.

Answer 1

Ben html elemanın font-size alarak bir fonksiyonu kullanılarak, size rem verecektir varsayalım, bunu değişse bile geri almak mümkün olacak:

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

örnek: http://jsfiddle.net/4NkSu/1/

Answer 2

jquery'yi kullanarak güncellenmiş bir cevap yayınlamaya karar verdi. Tek bir pikseldeki piksel sayısını elde etmek için bir parametre olmadan işlevi çağırabilirsiniz veya bu kadar çok sayıda piksel sayısını elde etmek için bir sayımı geçebilirsiniz. İşte jsFiddle da var: ** sadece W3C standartlarına uygunluk 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); 
    } 
}