Sử dụng jquery để tăng chiều rộng của vùng chứa bằng 10 rem

Question

Làm cách nào để tăng chiều rộng của một phần tử lên 10rem bằng jquery. Vấn đề là Jquery luôn trả về chiều rộng/chiều cao tính bằng pixel và chúng tôi muốn cập nhật chiều cao/chiều rộng ở một số đơn vị khác.

Ví dụ trên: 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()); 

Câu hỏi của tôi là ý kiến ​​trong các mã.

Answer 1

Tôi cho rằng lấy font-size của phần tử html sẽ cung cấp cho bạn rem, sử dụng một chức năng, bạn sẽ có thể lấy nó ngay cả khi nó thay đổi:

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

dụ: http://jsfiddle.net/4NkSu/1/

Answer 2

Quyết định đăng câu trả lời cập nhật bằng jquery. Bạn có thể gọi hàm không có tham số để lấy số pixel trong một lần rem, hoặc bạn có thể chuyển số đếm để có số lượng pixel trong nhiều lần rem đó. Dưới đây là một jsFiddle thêm: 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); 
    } 
}