jquery - 使用 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/